How to Turn VSCode Into the Ultimate Markdown Editor

If you write for the web, you might want to look into Markdown. There are plenty of Markdown apps that cater to web writers. But free code editors like Microsoft’s Visual Studio Code (VSCode) can be even more powerful.

VSCode understands Markdown and has built-in tools for previewing it in HTML. However, you can add word processor functionality like word count and a spell checker. You might also want to enable website-specific customizations for the previewer.

Finally, the ability to copy Markdown as HTML so you can cleanly paste it into a Content Management System (CMS) is a must.

Download and Install VSCode

To begin, download either VSCode or its open source alternative VSCodium. Versions of each are available for all major desktop operating systems.

Once you’ve downloaded and installed VSCode, run the application to begin.

Install Word Count Extension

Start by adding a word counter. There are many extensions available that handle this. The one that best differentiates between actual words and code or filenames is Microsoft’s own Word Counter extension.

Download: Word Count VSCode Extension (Free)

1. Click on Download Extension under Resources in the lower right-hand pane.
2. Once downloaded, switch to VSCode.
3. Click on the gear icon in the lower-left corner of the interface.
4. Click on Extensions.
5. Click the ellipsis (…) near the top of the Extensions pane.
6. Click Install from VSIX.

7. Choose the ms-vscode.wordcount-*.vsix file you just downloaded.

The Word Count extension should now be installed. Test it by opening a new Markdown file and typing. You should now see a word counter in the bottom left-hand side of the interface:

Install Spell Check Extension

You’ll also want to add spell check functionality. As with word counters, there are many extensions that handle spell checking. The most popular is Code Spell Check by Street Side Software as it’s available in many languages.

Download: Code Spell Check VSCode Extension (Free)

1. Follow steps 1 through 6 from the section above.
2. Choose the streetsidesoftware.code-spell-checker-*.vsix file you just downloaded.

The Code Spell Check extension should now be installed. Test it by opening a new Markdown file and typing misspelled words.

You should see a blue squiggly line under those words along with a count of errors in the bottom right-hand side of the interface:

Customize the Error Squiggle

The biggest issue with this Spell Check extension is the weak blue color used for the squiggle that identifies errors. It tends to blend into the background of dark themes and is reused for other Markdown elements.

You can try changing it to a bold red color like you’d expect to see in a word processor:

1. Click on the gear icon in the lower-left corner of the interface.
2. Click on Settings.
3. Click on Workbench, then Appearance.
4. Scroll down to Color Customization:

5. Click Edit in settings.json.
6. Paste the following code into the editor that opens in a new tab:

   "editorInfo.foreground": "#ff0000"

7. Close and save the file.

Now if you misspell a word, VSCode will decorate it with a bright red squiggle:

Ignoring False Positives

The spell checker may not recognize certain industry-specific terms or proper nouns like company names. In the screenshot above, for example, VSCode highlights the abbreviation “distro” as a misspelling.

To stop seeing these words as errors, you’ll want to add them to your User Settings.

1. Right-click on the word you want the spell checker to ignore.
2. Hover over Spelling and select Add Words to User Settings.

From now on, the spell check will no longer identify these words as incorrect:

Install Copy Markdown as HTML Extension

Next, install the Copy Markdown as HTML extension so you can copy & paste formatted Markdown.

Download: Copy Markdown as HTML VSCode Extension (Free)

1. Follow steps 1 through 6 from the sections above.
2. Choose the jerriepelser.copy-markdown-as-html-1.1.0.vsix file you just downloaded.

Now you should be able to copy Markdown from VSCode and paste it into a CMS as clean HTML. To test this:

1. Select some Markdown text.
2. Open the Command Palette in the View menu, or by pressing CTRL+Shift+P.
3. Choose Markdown: Copy as HTML:

4. Paste the copied Markdown into a new HTML file.

You should see that the copied Markdown was properly pasted as HTML:

Customizing the Preview Pane

By default, the preview pane will have the same style as the current VSCode theme.

However, you may want previews to more closely reflect your content’s ultimate destination. You can customize the preview pane to make your Markdown look like it’s already on the website you’re publishing to.

You can use any website you want; the following styles were taken from MUO. Just use your browser’s inspect element tool to find fonts and pick colors from any website.

1. Create a new file and name it something like “CustomStyles.css”
2. Paste the following example CSS code into the file:

   body {
   background-color: 
   color: 
   font-family: Roboto;
   font-size: 18px;
   font-weight: 400;
   line-height: 1.7em;
   max-width: 750px;
   }
   h1 {
   font-size: 38px;
   font-weight: 800;
   }
   h2 {
   font-size: 34px;
   font-weight: 700;
   }
   h3 {
   font-size: 24px;
   font-weight: 700;
   }
   a {
   border-bottom: 2px solid 
   color: 
   font-weight: 700;
   }
   a:hover {
   color: 
   background: 
   }
   strong {
   font-weight: bold;
   }

3. Close and save the file.
4. Click on the gear icon in the lower-left corner of the interface.
5. Click on Settings.
6. Click on Extensions and then Markdown.
7. Scroll down to Markdown: Styles and click Add Item.
8. Enter the path of your CustomStyles.css file, for example:

   C:UsersAdamCustomStyles.css

9. Click OK.

Once you’ve made these, you should end up with a preview pane that looks a lot like this article.

Again, I got these values by using my browser’s Inspect Element tool on MUO, but you’ll want to find the values for your own destination website.

Editor Themes

The default VSCode theme comes in both dark and light, with high-contrast versions of each. But like any good code editor, there are a ton of great third-party themes available.

If you prefer the look of a Word Processor over that of a code editor, I recommend the Office theme by huacat:

If you prefer a code editor, common themes like Dracula, Gruvbox, Material (see screenshot below), and Nord are all available from the extensions marketplace.

To install a new theme:

1. Click on the gear icon in the lower-left corner of the interface.
2. Click on Extensions.
3. Search for any of the above-mentioned themes or simply filter the category to themes and browse what’s available.

Is VSCode the Ultimate Markdown Editor?

So, is VSCode the ultimate Markdown editor for web content? Out-of-the-box, probably not. But it’s about as extensible as anything could be.

Word counters, spell checkers, Copy Markdown as HTML, preview customizations, and themes just scratch the surface. There’s an ecosystem full of extensions available for VSCode, and you’re free to make it your own.