Markdown Preview Extended

An extension pack which adds extended Markdown syntax support to VSCode's Markdown Preview. It's intended purpose is to ensure that what is rendered by the preview closely matches the HTML output one would get rendering the same document in a web application so that it can be styled using the same CSS for both.

📦 Contents

This is an extension pack consisting of the following VSCode Markdown Preview extensions. Where applicable, the usage syntax is provided as well as documentation about the associated semantic HTML element that is rendered.

Each extension runs the associated markdown-it plugin and the equivalent behavior can be achieved using remark in JavaScript frameworks such as Astro or Nextjs.

syntax	html	extension	markdown-it	remark
`++insert++`	`<ins>`	Markdown Insert	markdown-it-ins	remark-ins
`--delete--`	`<del>`	Markdown Delete `<del>`	@saeris/markdown-it-del	@saeris/remark-del
`==mark==`	`<mark>`	Markdown Mark	markdown-it-mark	remark-flexible-markers
`[[ctrl]]`	`<kbd>`	Markdown Keyboard `<kbd>`	markdown-it-kbd	remark-kbd ⚠
`{本\\|ほん}`	`<ruby>`	Markdown DenDen Furigana	markdown-it-ruby	remark-denden-ruby
`31^st^`	`<sup>`	Markdown Superscript	@mdit/plugin-sup	remark-supersub
`H~2~O`	`<sub>`	Markdown Subscript	@mdit/plugin-sub	remark-supersub
`*[term]:`	`<abbr>`	Markdown Abbreviation	@mdit/plugin-abbr	remark-abbr
`term` `: def`	`<dl>`	Markdown Definition List `<dl>`	@mdit/plugin-dl	remark-definition-list
`> [!NOTE]`	n/a	Markdown GitHub Alerts	markdown-it-github-alerts	remark-alerts
`![](https://github.com/saeris/markdown-preview-extended-syntax/raw/HEAD/.../img.svg)`	n/a	Markdown Inline SVG	@saeris/markdown-it-inline-svg	remark-inline-svg ⚠
n/a	n/a	Markdown Header Sections	markdown-it-header-sections	remark-sectionize

⚠ requires additional configuration

Markdown Preview Extended Syntax

saeris

Markdown Preview Extended

📦 Contents

🥂 License