Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Markdown ChromaNew to Visual Studio Code? Get it now.
Markdown Chroma

Markdown Chroma

studykit

|
6 installs
| (0) | Free
Obsidian and MyST Markdown preview for VS Code, with saved-document CLI and MCP retrieval.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info
Markdown Chroma icon

Markdown Chroma

Read Obsidian Markdown and MyST / Jupyter Book 2 in VS Code's built-in Markdown Preview. Follow links between notes, bring related content into a page, and preview equations, callouts, tabs, and scientific documents while you write.

Start with any folder of Markdown files. An Obsidian vault or MyST project is optional, and the extension needs no separate Node.js installation or document server.

Start reading in three steps

  1. Install Markdown Chroma from the Visual Studio Marketplace, or search for studykit.markdown-chroma in VS Code's Extensions view.
  2. Open a folder of Markdown files, then open a .md document.
  3. Run Markdown: Open Preview to the Side from the Command Palette.

Shortcut: Cmd+K V on macOS or Ctrl+K V on Windows/Linux. You can also run Markdown Chroma: Open Preview to the Side.

If you have a .vsix file, use Extensions: Install from VSIX... in VS Code to install it locally.

The preview follows your VS Code theme and scroll position. Open-document edits appear before you save, including edits to notes embedded in the page. Add a language such as python, javascript, or json after the opening code fence for syntax highlighting.

Your notes, with Obsidian Markdown

Wikilinks, note embeds, foldable callouts, highlights, tags, tasks, and footnotes work together in the same preview.

Obsidian Markdown source and rendered preview in VS Code, showing links, nested callouts, colored highlights, tasks, and an embedded note

Open the screenshot example, or explore the full Obsidian showcase with images, audio, tables, and nested embeds.

Try a link and a callout in your own note:

[[Release plan|Read the release plan]]

> [!tip]+ Keep the context nearby
> Use ==highlights== and link to [[Related notes]].

![[Release plan#Checklist]]

Links can use a file name, heading, block ID, or frontmatter alias. Put note embeds on their own line. Click a callout title to fold it; keyboard navigation works too.

Scientific writing, with MyST

Preview equations and references, admonitions, figures, citations, glossaries, tabs, cards, proofs, and exercises directly in Markdown. A myst.yml file can supply project settings, but you can start without one.

MyST Markdown source and rendered preview in VS Code, showing an admonition, numbered equation, equation reference, code tabs, and cards

Open the screenshot example. More examples cover scientific documents, layouts and figures, syntax, and glossaries and terms.

For example, give an equation a label and refer to it later:

```{math}
:label: energy
E = mc^2
```

See equation {eq}`energy`.

See the MyST authoring guide for the syntax.

Projects can also enable local JavaScript directive and role plugins in a trusted workspace. See project plugin setup and limits.

Make the preview yours

Use VS Code's normal Markdown preview settings and your preferred theme. For a deeper look at links, media, callout colors and icons, frontmatter, and MyST options, see the preview guide.

Setting Default Use it to
markdownChroma.preview.root "" Choose the folder used to resolve preview links and local includes; empty uses the workspace folder
markdownChroma.preview.maxEmbedDepth 5 Limit nested note embeds and MyST includes or embeds
markdownChroma.preview.projectPlugins false Enable local MyST project plugins in a trusted workspace
markdown.preview.frontMatter "table" Show frontmatter as a table, code block, or hide it
markdown.preview.breaks false Display single line breaks in the preview

For project plugin errors, run Markdown Chroma: Show Project Plugin Logs. After fixing the plugin, save it or focus the Markdown source and run Markdown Chroma: Reload Project Plugins. See the plugin troubleshooting steps.

CLI and MCP guides

  • CLI: search, source reads, selective directive expansion, and automatic indexing
  • MCP server: VS Code setup, stdio and URL connections, tools, and shared API

What to expect

Markdown Chroma enhances the reading preview on desktop VS Code. Checkboxes are read-only. Document code, Dataview, Templater, and Obsidian plugins are not executed, and Obsidian themes are not loaded automatically. MyST previews display local includes and saved notebook outputs without running a notebook or publishing a book.

Local files are supported; virtual workspaces and browser-based VS Code are not. Missing or ambiguous note links show an explanation, and cyclic embeds stop safely. For additional limits and syntax details, see the preview guide.

Help and contributions

Report a problem or suggest a feature in GitHub Issues. Include a small Markdown example and your VS Code version so the behavior can be reproduced.

Developer setup, build instructions, and verification are in the development guide. Released under the MIT license.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
  • Your Privacy Choices
  • Consumer Health Privacy
© 2026 Microsoft