Top 5 VSCode Extensions for Markdown
Tags: tools, vscode, programming
Published: 2021-05-29 11:25:04

---
title: Top 5 VSCode Extensions for Markdown
published: true
date: 2021-05-29 07:26:52 UTC
tags: Tools,VSCode,Programming
canonical_url: http://coderscat.com/awesome-vscode-extensions-for-markdown/
---

I moved from Emacs to VSCode for almost one year. Most of the time, I’m editing Markdown.

Let me share these 5 extensions which are useful for boosting your productivity on Markdown.

## Markdown All in One

[Markdown All in One](https://github.com/yzhang-gh/vscode-markdown) is a must one for editing Markdown. It contains Markdown preview,  
keyboard shortcuts, auto preview, etc.

The shortcuts will make editing Markdown much easy:

![file:tab](http://coderscat.com/images/tab-backspace.gif)

The completion also contains pathfinding.

![file:vscode-markdown](http://coderscat.com/images/vscode-markdown-all-in-one.gif)

We can print Markdown to HTML with the command: `Markdown: Print current document to HTML`.

Furthermore, it comes with a beautiful Math support:

![img:vscode-math](http://coderscat.com/images/markdown-math.png)

## Dictionary Completion

[Dictionary Completion](https://marketplace.visualstudio.com/items?itemName=yzhang.dictionary-completion) is another extension to help you input English words quicker. Because I’m not a native English speaker, this also helps me to write words correctly:

![img:vscode-dict](http://coderscat.com/images/vscode-markdown-dict.gif)

Markdown does not support quick suggestions in default, we need to add the below snippet to make hints appear when type in a Markdown file:

```json
"[markdown]": { 
    "editor.quickSuggestions": true
}
```

## Paste Image

I’d love to insert more screenshots to my Markdown files. [Paste Image](https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image) helps you save your images from xclip. This extension supports Mac/Windows/Linux.

![img:markdown-paste-img](http://coderscat.com/images/vscode-paste-image.gif)

## PlantUML

[PlantUML](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml) is an awesome extension if you need to draw diagrams.  
In PlantUML, diagrams are defined using a [simple and intuitive language](https://plantuml.com/). When you editing the source files of the diagrams, you can also preview the result:

![img:markdown-plantuml](http://coderscat.com/images/plantuml-demo.gif)

PlantUML supports all kinds of diagrams used by developers, such as sequence diagrams, object and class diagrams, etc.

## Markdown Emoji

We need more smiles!

[Markdown Emoji](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-emoji) does one simple thing: add some Emoji faces in your document.

![img:emoji](http://coderscat.com/images/markdown-emoji.png)

But I found a defect for this extension, my Hexo rendered result does not show Emoji correct in HTML. There is another similar extension [Emoji](https://marketplace.visualstudio.com/items?itemName=Perkovec.emoji) solves this issue. And you can even add Emoji in code:

![img:markdown-emoji](http://coderscat.com/images/markdown-emoji-2.gif)

That all, happy editing Markdown!