Visual Studio Code is a very powerful editor. There’s little doubt that developers from many different languages are using this editor to extend for their own needs. One of my favorite uses of Visual Studio Code is to use it as a pure Markdown editor. Chances are you’re familiar with Markdown at this point as GitHub, StackOverflow, and many other systems use Markdown to strip out unnecessary HTML and have a clean and concise rendering.

Here is a sample of Markdown:

1
2
3
4
5
6
7
8

## Heading ##
This is a paragraph of text. 

We can also include [links](https://jasong.us/39BVKRI)

### Task List ###
* Task 1
* Task 2

You may want to see the rendered result of the Markdown. To do this in Visual Studio Code, there are two options:

  • To open a separate preview window, use the keyboard shortcut Ctrl+Shift+V
  • To open side by side, use the keyboard shortcut Ctrl+K V

As an example, the preview of this post would look like this in preview:

Post Markdown Preview

Note: Typically, images would render in the preview. However, I'm using a custom include so I can handle images differently than Markdown out of the box.

When opening the preview side by side, you’ll notice the preview updates dynamically and will scroll with the content you are typing in the other window. If you’d like to disable this, you can update the settings markdown.preview.scrollPreviewWithEditor and markdown.preview.scrollEditorWithPreview.

You can also use the Outline pane in the Explorer. If you are using headers, you’ll see the headings appear in Outline. Using the markdown sample above, we would see the following in Outline:

Outline Pane in Visual Studio Code