Markdown Mark Preview

Markdown Mark Preview adds two small but practical features to VS Code's built-in Markdown preview:

• ==mark syntax== renders as HTML <mark>...</mark>.
• todo-tree style tags such as TODO, FIXME, [ ], and [x] are highlighted in preview.

It is intended for people who already write task-oriented Markdown notes and want the preview to look closer to the editor view.

Features

Mark Syntax

This sentence contains ==highlighted text==.

Preview output:

This sentence contains <mark>highlighted text</mark>.

Todo-Tree Preview Highlighting

TODO write the release notes.
[ ] review the package metadata.
[x] ship the extension.

The extension highlights configured todo-tree tags in the Markdown preview and keeps inline Markdown content, such as code spans, inside text-level highlights.

Configuration

The extension directly reuses todo-tree's own highlight settings:

1. todo-tree.highlights.defaultHighlight
2. todo-tree.highlights.customHighlight

There is no separate Markdown Mark Preview highlight setting. Configure todo-tree once, and the Markdown preview follows the same highlight data where preview rendering can support it.

Example:

{
  "todo-tree.highlights.defaultHighlight": {
    "borderRadius": "5px",
    "type": "text"
  },
  "todo-tree.highlights.customHighlight": {
    "REVIEW": {
      "background": "#4f46e5",
      "foreground": "#ffffff",
      "type": "tag"
    }
  }
}

Supported preview type values:

• tag: highlight only the tag.
• text: highlight the tag and the text after it.
• line / whole-line: highlight the available Markdown text line.
• none: disable preview highlighting for that tag.

todo-tree values such as tag-and-comment, tag-and-subTag, text-and-comment, and capture-groups:* depend on editor ranges and search regex behavior. Markdown Mark Preview maps them to the closest inline preview behavior instead of reproducing editor decorations exactly.

Default Tags

If todo-tree has no highlight settings, the extension falls back to bundled defaults for:

#TICKTICK-0, #TICKTICK-25, #TICKTICK-50, #TICKTICK-75, FIXME, TAG, TIPS, NOTICE, DECISION, MILESTONE, WARNNING, [ ], [x], [X], TODO, XXX, and ERROR.

Install From Source

npm install
npm run package
code --install-extension .\markdown-mark-preview-0.1.0.vsix

Reload VS Code after installation, then open the built-in Markdown preview.

Development

npm install
npm test
npm run package

Project layout:

• extension.js: Markdown-it plugin and VS Code activation entry.
• test/extension.test.js: Markdown-it rendering tests.
• package.json: VS Code extension manifest, scripts, and configuration schema.

License

MIT