Help us improve
Share bugs, ideas, or general feedback.
From kb-mpe
Reference knowledge for Markdown Preview Enhanced (MPE) VS Code extension. Covers settings, code chunks, file imports (@import), diagram engines (Mermaid, PlantUML, GraphViz, Vega-Lite, Kroki, WaveDrom), reveal.js presentations, export pipelines (PDF, HTML, Pandoc, eBook), and custom CSS styling. Use when the user is working with MPE, asking about MPE features, configuring preview settings, embedding diagrams, building slides, exporting documents, or troubleshooting issues like preview not rendering or export failing. Do not use for general Markdown syntax or other VS Code extensions.
npx claudepluginhub nathanvale/side-quest-marketplace --plugin kb-mpeHow this skill is triggered — by the user, by Claude, or both
Slash command
/kb-mpe:mpeThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Reference knowledge for Markdown Preview Enhanced (MPE), a VS Code extension for advanced Markdown previewing and exporting. MPE uses the **crossnote** rendering engine.
Serves markdown as live-reloading browser previews using mdserve for complex docs, tables, Mermaid diagrams, and multi-file sets. Handles iterative edits.
Generates browser-viewable HTML previews from markdown, plain text, and Mermaid diagrams. Validates diagrams, applies GitHub/dark/minimal styling, saves to temp dir, and auto-opens in default browser for docs, reports, and visualizations.
Guides Slidev code block features: Shiki syntax highlighting, line highlighting, Monaco editor, Magic Move animations, TwoSlash type annotations, and tabbed code groups.
Share bugs, ideas, or general feedback.
Reference knowledge for Markdown Preview Enhanced (MPE), a VS Code extension for advanced Markdown previewing and exporting. MPE uses the crossnote rendering engine.
| User Intent | Reference | Quick Hint |
|---|---|---|
| Configure VS Code settings / extension options | settings.md | markdown-preview-enhanced.* in settings.json |
Execute code in preview / {cmd} blocks / output modes | code-chunks.md | Requires enableScriptExecution: true |
| Import files, images, or other markdown into a doc | file-imports.md | @ import "path" syntax (no space in actual use) |
| Embed diagrams (Mermaid, PlantUML, GraphViz, etc.) | diagrams.md | Fenced code blocks with engine name |
| Build reveal.js presentations / slides | presentations.md | <!-- slide --> separator |
| Export to PDF, HTML, eBook, or PNG | export.md | Right-click preview > Export |
| Style the preview / custom CSS / dark mode | custom-css.md | Edit style.less via Customize CSS command |
| Setting | Default | Purpose |
|---|---|---|
previewTheme | github-light.css | Preview color scheme |
codeBlockTheme | auto.css | Syntax highlight theme |
enableScriptExecution | false | Allow {cmd} code chunks |
mermaidTheme | default | Mermaid diagram theme |
mathRenderingOption | KaTeX | Math engine (KaTeX or MathJax) |
```python {cmd=true output="markdown"}
print("| Col A | Col B |")
```
Run current chunk: Shift+Enter | Run all chunks: Ctrl+Shift+Enter
@ import "path/to/file.md"
(Remove space after @ in actual use -- escaped here to prevent loader execution.)
Preview not rendering? Check editorAssociations in settings.json -- VS Code bug #192954 can override MPE. Fix: set "*.md": "default" in editorAssociations.
Code chunks not executing? Set enableScriptExecution: true in VS Code settings. Security risk -- only enable in trusted workspaces.
Diagrams not showing? PlantUML requires Java on PATH. Mermaid/GraphViz work out of the box. Kroki requires internet (external service).
PDF export failing? Puppeteer needs Chrome/Chromium. Set chromePath if auto-detection fails. See export.md.
Custom CSS not applying? Run "Markdown Preview Enhanced: Customize Css" from Command Palette. Edits ~/.crossnote/style.less (global) or workspace .crossnote/style.less.
Config.js vs settings.json? VS Code settings.json controls extension behavior. Crossnote config.js controls rendering engine. Access config.js from Command Palette: "MPE: Open Crossnote Config".