Using VS Code as a Markdown Editor

After writing about five Markdown posts in VS Code, I feel like I’ve got the basics down.

Today I’ll show you how to use VS Code as a Markdown editor.

You just need to lightly tweak two extensions and settings.json and you’re done.

1. Extensions

Let’s install a pack that solves two annoying things when writing Markdown.

Open Extensions on the left and search for markdown.

Then install the packs you see in the screenshot.

For Markdown-related features, the All in One extension is basically all you need.

It offers a lot of handy features like bold, tables, lists, and more.

The image uploader makes inserting images easier.

Normally you’d have to go through the tedious process of download image ➡️ move to folder ➡️ insert image link.

With this extension, you just copy image ➡️ press cmd+v once, and the image is copied into the folder and inserted into the document.

2. Trying it out

When you open a Markdown file, you’ll see an extra tab in the top right.

If you click it, a preview window opens on the right.

As you write, you can instantly preview the formatting.

Let’s also try a shortcut.

If you want to emphasize some text in the middle, just drag that part and press cmd + b.

The image uploader is insanely useful.

If you have an image you want to insert into your Markdown, copy it.

You can copy the file itself, or something you’ve put into the clipboard from online.

Then when you paste it in the Markdown file, it’s inserted in the text like below and the image is also saved into the folder.

3. If you’re writing posts in .mdx...

I’m currently writing my Markdown posts with the .mdx extension.

In that case, you just need to tweak settings.json a bit inside .vscode.

{
  "files.associations": {
    "*.html": "html",
    "ostream": "cpp",
    "stdio.h": "c",
    "*.css": "tailwindcss",
    "*.mdx": "markdown", // 이게 핵심!
  },
  "editor.quickSuggestions": {
    "strings": "on"
  }
}

If you do this, you can use the Markdown extensions with .mdx files as well.

4. To wrap up

At first, I really disliked the idea of writing posts in Markdown.

I was convinced you had to use a web editor for blogging, but once I got used to it, I actually found it more convenient than a web editor.

Even if you upload lots of images, you don’t have to wait for uploads.

You can also edit images freely.

Anyway...

That’s how I’d like to think of it.