VSCode Extensions - Markdown

Brief overview of excellent extensions and settings to make VSCode a Markdown editor without competition.

Editing Markdown is a common experience these days. The format is human-readable and designed for HTML-rendering first. It can also be used to generate PDFs or documents in other formats. Finally, it allows embedding of any code block, which is then (at the grace of the given renderer) used to give us diagrams, charts, mathematics, and more beautifully rendered.

Personally, I demand the following set of feature from a Markdown editor:

  • Code first, i.e., no WYSIWYG
  • Beautiful and live-updated preview functionality
  • Optional side-by-side preview with very good scroll hook
  • Ability to extend with custom code-block renderers
  • Save as PDF option, where I can potential change at least the used stylesheet
  • Auto-generate a lot of stuff, e.g., a table of contents (if wished)
  • Optionally, the ability to deal with frontmatter in the YAML format
  • A spell checker with multi language support (at least English, optional German)
  • An outline view of my document
  • Linting of my Markdown documents
  • Optionally some good keyboard shortcuts and other convenience methods

I already tried some general text editors and dedicated Markdown editors for this job. Among the list of candidates we find:

  • Sublime Text 2/3
  • Markdown Edit
  • Markdown Pad 2
  • MarkPad
  • Typora

From this list, Typora is the one that came closest to my desired state. However, Typora is not code-first and is limited by its extensions (it has / allows none). Therefore, it is not possible to extend Typora with, e.g., more diagram types. Also the spell check is lacking and it has troubles with larger tables.

Therefore I went to try using VSCode (my nearly-exclusive code editor these days anyway) for Markdown. I found a couple of nice extensions, which, when thrown together, let me use VSCode in a mode that gets me very close to my desired Markdown editing experience.

The extensions I use are:

  • Spell Right (nice offline-first spell checker)
  • vscode-icons (to use some different icons, e.g., for Markdown files)
  • markdownlint (very good Markdown linting and error detection)
  • Markdown Preview Mermaid Support (support for Mermaid diagrams)
  • Markdown PDF (enables the option to save Markdown as PDF)
  • Markdown All in One (a couple of advancements, e.g., side-by-side editing, ToC generation)
  • Markdown+Math (allows writing some LaTeX-like equations, which are rendered using MathJax)
  • Copy Markdown as HTML (gives me the option to directly go from Markdown to HTML without saving an intermediate file)
  • Markdown Table Formatter (I love my tables formatted, i.e., as one block - this plugin makes the code look nice)
  • Markdown Checkboxes (gives me checkboxes à la GitHub for TODO lists)
  • EditorConfig for VS Code (apply common editing rules also to Markdown)

Note that these are just the extensions that are used for augmenting the Markdown editing experience.

Created . Last updated .

References

Sharing is caring!