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
- To place images
- VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
- 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: ![](images/imagename.extension)
Usages: ![](images/abc.png)
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
- Select File > Preferences > UserSettings or Workspace Settings
- Find markdown-pdf settings in the Default Settings
- Copy markdown-pdf.* settings
- 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