Markdown Extended Pro

Markdown Extended Pro is a comprehensive extension that extends syntaxes and abilities to VSCode's built-in markdown functionality.

Key Features:

🎨 Extended Syntax Support - 20+ markdown-it plugins for enhanced formatting
📝 Advanced Note Types - Sidenotes, marginal notes, and sidebar annotations
📤 WYSIWYG Exporter - Export to HTML, PDF, PNG, JPEG with perfect fidelity
✏️ Editing Helpers - Table formatting, text formatting toggles, and more
🏗️ Modern Architecture - Built with TypeScript, comprehensive test coverage, robust error handling

Export files are consistent with what you see in markdown preview, including syntaxes and styles contributed by other plugins.

Features

Exporter

Export to Self Contained HTML / PDF / PNG / JPEG with perfect preview fidelity:

Export current document / workspace
Copy exported HTML to clipboard
WYSIWYG export matches preview exactly

Find commands in the command palette or right-click on an editor / workspace folder:

Markdown: Export to File
Markdown: Export Markdown to File

Export files are organized in the out directory in the workspace root by default.

Editing Helpers

Command palette or right-click shortcuts for markdown editing:

Table Operations: Paste as table, format table, add/delete/move columns & rows
Text Formatting: Toggle bold, italic, underline, strikethrough, mark, code, block quote
Lists: Toggle ordered/unordered lists, superscript, subscript
Smart Editing: Auto-format tables, CSV to table conversion

See Editing Helpers and Keys for details.

Color Themes

Two included color themes for enhanced markdown syntax highlighting:

Markdown Extended Light - Clean, readable colors matching Styles.css light mode
Markdown Extended Dark - Eye-friendly dark theme matching Styles.css dark mode

To activate: Press Ctrl+K Ctrl+T and select "Markdown Extended Light" or "Markdown Extended Dark"

All colors extracted from the official Styles.css:

Italic (*): Gold - Underline (_): Green - Bold (**): Purple - Strong (__): Cyan
Strikethrough (~~): Pink/Red - Highlight (==): Orange
Sidenotes, marginal notes, sidebars, TOC, footnotes with distinct colors

See themes/README.md for color mapping details.

Extended Syntaxes

Built-in syntax extensions:

Sidenotes & Annotations (built-in) - View Document
- Sidenotes: ++reference text|note content++
- Marginal notes: !!reference text|note content!!
- Sidebars: $left sidebar$ and @right sidebar@
Admonition (built-in) - View Document
Enhanced Anchor Link (built-in) - Auto-slugify heading links

Integrated markdown-it plugins:

markdown-it-table-of-contents - [[TOC]]
markdown-it-footnote - Footnote syntax
markdown-it-abbr - Abbreviations
markdown-it-deflist - Definition lists
markdown-it-sup-alt - Superscript ^text^
markdown-it-sub-alt - Subscript ~text~
markdown-it-checkbox - Task lists
markdown-it-attrs - Add attributes {.class #id}
markdown-it-kbd - Keyboard keys [[Ctrl+S]]
markdown-it-ib - Italic-bold support
markdown-it-mark - Mark/highlight ==text==
markdown-it-multimd-table - Advanced tables
markdown-it-emoji - Emoji support :smile:
markdown-it-html5-embed - Embed media
markdown-it-container - Custom containers
markdown-it-bracketed-spans - Span syntax

Post an issue on GitHub if you want other plugins.

Disable Plugins

To disable integrated plugins, add their names (comma-separated, without markdown-it- prefix) to settings:

"markdownExtended.disabledPlugins": "ib, emoji, bracketed-spans"

Available plugin names: table-of-contents, container, admonition, footnote, abbr, sup-alt, sub-alt, checkbox, attrs, kbd, ib, mark, deflist, emoji, multimd-table, html5-embed, sidenote, bracketed-spans, helper

Architecture & Development

This extension follows modern best practices with:

Clean Architecture: Singleton services, dependency injection, separation of concerns
Type Safety: Full TypeScript with strict patterns
Error Handling: Comprehensive error recovery and logging
Resource Management: Proper cleanup, async operations, memory leak prevention
Test Coverage: 65+ unit tests with VS Code integration

For detailed architecture documentation, see ARCHITECTURE.md.

Works Well With Other Extensions

The extension works seamlessly with other markdown plugins that contribute to the built-in Markdown engine - both in Preview and Export:

The extension doesn't aim to do everything - use specialized plugins for deep features!

Exporter

Find in command palette, or right click on an editor / workspace folder, and execute:

Markdown: Export to File
Markdown: Export Markdown to File

The export files are organized in out directory in the root of workspace folder by default.

Export Configurations

You can configure exporting for multiple documents with user settings.

Further, you can add per-file settings inside markdown to override user settings (highest priority):

---
puppeteer:
    pdf:
        format: A4
        displayHeaderFooter: true
        margin:
            top: 1cm
            right: 1cm
            bottom: 1cm
            left: 1cm
    image:
        quality: 90
        fullPage: true
---
contents goes here...

See all available settings for puppeteer.pdf, and puppeteer.image

Editing Helpers

Editing Helpers and Keys

Inspired by joshbax.mdhelper, but totally new implements.

Default Keyboard Shortcut bindings are removed due to conflict issues on platforms, please consider:

Switch to use command palette
Switch to use Snippets
Setup key bindings on your own

| Command | Keyboard Shortcut | | ----------------------------- | --------------------------------- | | Format: Toggle Bold | ~~Ctrl+B~~ | | Format: Toggle Italics | ~~Ctrl+I~~ | | Format: Toggle Underline | ~~Ctrl+U~~ | | Format: Toggle Mark | ~~Ctrl+M~~ | | Format: Toggle Strikethrough | ~~Alt+S~~ | | Format: Toggle Code Inline | ~~Alt+~~ | | Format: Toggle Code Block | ~~Alt+Shift+~~ | | Format: Toggle Block Quote | ~~Ctrl+Shift+Q~~ | | Format: Toggle Superscript | ~~Ctrl+Shift+U~~ | | Format: Toggle Subscript | ~~Ctrl+Shift+L~~ | | Format: Toggle Unordered List | ~~Ctrl+L, Ctrl+U~~ | | Format: Toggle Ordered List | ~~Ctrl+L, Ctrl+O~~ | | Table: Paste as Table | ~~Ctrl+Shift+T, Ctrl+Shift+P~~ | | Table: Format Table | ~~Ctrl+Shift+T, Ctrl+Shift+F~~ | | Table: Add Columns to Left | ~~Ctrl+Shift+T, Ctrl+Shift+L~~ | | Table: Add Columns to Right | ~~Ctrl+Shift+T, Ctrl+Shift+R~~ | | Table: Add Rows Above | ~~Ctrl+Shift+T, Ctrl+Shift+A~~ | | Table: Add Row Below | ~~Ctrl+Shift+T, Ctrl+Shift+B~~ | | Table: Move Columns Left | ~~Ctrl+Shift+T Ctrl+Shift+Left~~ | | Table: Move Columns Right | ~~Ctrl+Shift+T Ctrl+Shift+Right~~ | | Table: Delete Rows | ~~Ctrl+Shift+D, Ctrl+Shift+R~~ | | Table: Delete Columns | ~~Ctrl+Shift+D, Ctrl+Shift+C~~ |

Looking for Move Rows Up / Down?
You can use vscode built-in Move Line Up / Down, shortcuts are alt+↑ and alt+↓

Snippets

Index	Prefix	Context	View
0	`underline`	`_under_ line`	under line
1	`mark`	`==mark==`	==mark==
2	`subscript`	`~sub~script`	~sub~script
3	`superscript`	`^super^script`	^super^script
4	`checkbox`	`[] checkbox`	[ ] checkbox
5	`tasklist`	`- [] task`	- [ ] task
6	`table`	Markdown table	See Paste as Table
7	`kbd`	Keyboard tag	Keyboard shortcut
8	`admonition` / `note`	Admonition block	Admonition
9	`sidenote`	`++ref\\|note++`	Sidenote
10	`marginnote`	`!!ref\\|note!!`	Marginal
11	`footnote`	`[^abc]` and `[^abc]: ABC`	Footnote
12	`container`	Custom container	Container
13	`abbr`	`*[ABBR]: Abbreviation`	Abbr
14	`attr`	`attr{style="color:red"}`	Styled text
15	`color`	Text with color	Colored text

Table Editing

tableEdit

moveCols

Move columns key bindings has been changed to ctrl+shift+t ctrl+shift+left/right, due to #57, #68

Paste as Markdown Table

Copy a table from Excel, Web and other applications which support the format of Comma-Separated Values (CSV), then run the command Paste as Markdown Table, you will get the markdown table.

pasteTable

Export & Copy

command

Syntax Documentation

Sidenotes and Annotations

This extension provides powerful annotation features with full markdown support:

Sidenotes

Sidenotes appear as floating annotations next to your text:

This is main text with ++reference text|This is the sidenote content with **markdown** support++.

Marginal Notes

Marginal notes appear in the document margin:

This is main text with !!reference text|This is the marginal note with *italic* text!!.

Sidebars

Left and right sidebar annotations for additional context:

$This appears in the left sidebar with [links](https://github.com/JackDMF/vscode-markdown-extended/blob/HEAD/url) and other markdown$

@This appears in the right sidebar with `code` and formatting@

Features:

Full markdown support within notes (bold, italic, links, code, etc.)
Recursion depth limiting for safety
Graceful error handling

CSS Classes:

Sidenotes: .sn-ref (reference), .sidenote (content)
Marginal notes: .mn-ref (reference), .mnote (content)
Sidebars: .left-sidebar, .right-sidebar

Admonition

Inspired by MkDocs

Nesting supported (by indent) admonition, the following shows a danger admonition nested by a note admonition.

!!! note

    This is the **note** admonition body

    !!! danger Danger Title
        This is the **danger** admonition body

admonition-demo

Removing Admonition Title

!!! danger ""
    This is the danger admonition body

admonition-demo

Supported Qualifiers

markdown-it-table-of-contents

[[TOC]]

Generates a table of contents from document headings.

markdown-it-footnote

Here is a footnote reference,[^1] and another.[^longnote]

[^1]: Here is the footnote.
[^longnote]: Here's one with multiple blocks.

Example output: Here is a footnote reference with superscript links.

markdown-it-abbr

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium
The HTML specification
is maintained by the W3C.

The HTML specification is maintained by the W3C (with abbreviation tooltips).

markdown-it-deflist

Apple
:   Pomaceous fruit of plants of the genus Malus in the family Rosaceae.

Creates definition lists with terms and definitions.

markdown-it-sup markdown-it-sub

29^th^, H~2~O

Example: 29^th, H₂O

markdown-it-checkbox

[ ] unchecked
[x] checked

Creates interactive checkboxes in preview.

markdown-it-attrs

item **bold red**{style="color:red"}

Example: item bold red (styled with inline CSS)

markdown-it-kbd

[[Ctrl+Esc]]

Renders keyboard shortcuts with proper styling.

markdown-it-ib

_underline_

Provides italic-bold support with underline rendering.

markdown-it-container

::::: container
:::: row
::: col-xs-6 alert alert-success
success text
:::
::: col-xs-6 alert alert-warning
warning text
:::
::::
:::::

Rendered with Bootstrap styles. To see the same result, add this config:

"markdown.styles": [
    "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
]

Known Issues & Feedback

Please post and view issues on GitHub

Enjoy!