7

Preview Markdown in Visual Studio Code

 3 years ago
source link: https://www.jasongaylord.com/blog/2021/09/27/preview-markdown-visual-studio-code
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Preview Markdown in Visual Studio Code

Sep 27, 2021

  ●  

1 minute(s) to read

  ●  

Permalink

  ●  

suggest edit

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:

## 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:

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:


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK