Markdown file convert/export to html, png, jpeg, pdf with images

Hi folks,

Today I will share about, how we can include the images in markdown file and export to pdf, html, png and jpeg formats.

You can do this with 2 Visual Studio Code extensions

Pre-requisites

Visual Studio Code with following MarkDown Extensions

1. To place images
• VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
2. To convert the markdown to pdf, html, png and jpeg formats
• VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf

Install the above 2 Visual Studio Code extensions.

Insert an image

Create images folder and keep all your images (Optional, but easy to maintain)

Syntax: 

Usages: 

By now, your image is part of your file.

Preview your file

Open Command Palette (View -> Command Palette OR Type F1 OR Ctrl+Shift+p)

Type "Markdown: Open Preview" OR Ctrl+Shift+v keyboard shotcut

Export Markdown

Open Command Palette (View -> Command Palette OR Type F1 OR Ctrl+Shift+p)

Type export and select below

• markdown-pdf: Export (pdf)
• markdown-pdf: Export (html)
• markdown-pdf: Export (png)
• markdown-pdf: Export (jpeg)
• markdown-pdf: Export (all: pdf, html, png, jpeg)

Change Markdown conversion settings

1. Select File > Preferences > UserSettings or Workspace Settings
2. Find markdown-pdf settings in the Default Settings
3. Copy markdown-pdf.* settings
4. Paste to the settings.json, and change the value

Hope this blog is useful to insert images in your markdown file and export to supported formats.

Please send your valuable feedback and comments to psrdotcom@gmail.com