If you want to add emoji in your VS Code markdown that is supported by GitHub too, then this is the right article for you.
VS Code provides us with various extension to add various tools to support our development workflow. So here, we will see how to add emoji in our markdown with VSCode plugins.
Two extensions to insert emoji In VSCode
- Markdown Emoji
- emojisense (Recommended)
Both extensions were created by Matt Bierner.
Use markdown emoji in VS Code
First, install Mardown Emoji from VS Code extension section.
To use any emoji in your markdown, type a colon ( : ) along with the name of the emoji and close the colon. For example for blush emoji (:blush:), type :blush:.
However, one thing I didn’t like about this extension is that it doesn’t show to preview of the emoji as we type. We have to preview the whole document to see the emoji.
Using emojisense in VS Code
The emojiosense is better than the markdown emoji because it shows the preview of the emoji as we type it in our markdown.
It also gives a list of autocomplete suggestions as we type the name of emojis.
Adding emoji as same as the above plugin.
First, install the emojisense extension in Vscode and then type the name of the emoji you want between two colons, like this :smile:
It displays a small preview of the emoji next to it.
List of all the emoji : Github Markdown Emoji
This emoji is supported by GitHub too, so you can use it in your Github readme file too.
How to preview your markdown in VSCode
To preview your markdown document in VS Code, we have to right-click the document in the sidebar navigation and Click Open Preview. Or you can use the keyboard shortcut, Ctrl + Shift +V
Once done, you can convert your markdown to any format like PDF, word,etc in VS Cide too. Read How to convert markdown files to PDF in VSCode
Related Articles:
How to convert markdown to PDF offline using Pandoc Converter
