react-vscode-markdown
v0.1.0
Published
React markdown renderer with VS Code styling, highlight.js syntax highlighting, and task list support
Maintainers
rogersnmReadme
react-vscode-markdown
React markdown renderer with VS Code styling, highlight.js syntax highlighting, and task list support. Built on markdown-it with DOMPurify sanitization.
Install
npm install react-vscode-markdownUsage
import { MarkdownRenderer } from "react-vscode-markdown";
import "react-vscode-markdown/css";
function App() {
return <MarkdownRenderer content="# Hello **world**" />;
}Custom plugins
import markdownItFootnote from "markdown-it-footnote";
<MarkdownRenderer
content={text}
plugins={[[markdownItFootnote]]}
/>Plugins with options use a tuple: [[plugin, { opt: true }]].
Disabling defaults
The component ships with highlight.js syntax highlighting and task list checkboxes enabled by default. Disable either with disableDefaults:
<MarkdownRenderer
content={text}
disableDefaults={["highlight", "taskLists"]}
/>Overriding markdown-it options
<MarkdownRenderer
content={text}
options={{ html: true, breaks: true }}
/>Headless usage (no React)
Use createMd directly to get a configured markdown-it instance:
import { createMd } from "react-vscode-markdown";
const md = createMd();
const html = md.render("# Hello");createMd accepts the same options, plugins, and disableDefaults parameters as the component.
Dark mode
Add the dark class to any ancestor element to switch to dark theme colors:
<body class="dark">
<!-- dark mode styles apply -->
</body>CSS custom properties
Override these on .vscode-markdown or any ancestor to customize styling:
| Property | Default | Description |
|---|---|---|
| --vscode-md-font-family | -apple-system, BlinkMacSystemFont, "Segoe WPC", ... | Body font stack |
| --vscode-md-font-size | 14px | Base font size |
| --vscode-md-code-font-family | "SF Mono", Monaco, Menlo, Consolas, ... | Code font stack |
| --vscode-md-border | rgba(0,0,0,0.18) (light) / rgba(255,255,255,0.18) (dark) | Border color for code blocks |
Supported languages
Syntax highlighting is included for: TypeScript, JavaScript, JSON, Bash, SQL, CSS, HTML, XML, Python, Go, Rust, YAML, Diff.
API
<MarkdownRenderer>
| Prop | Type | Default | Description |
|---|---|---|---|
| content | string | (required) | Markdown source text |
| plugins | PluginDef[] | undefined | Additional markdown-it plugins |
| options | Options | undefined | markdown-it options override |
| disableDefaults | DefaultFeature[] | undefined | Features to disable: "highlight", "taskLists" |
| className | string | undefined | Additional CSS class (appended to vscode-markdown) |
| emptyMessage | string | "No content." | Text shown when content is empty |
createMd(options?, plugins?, disableDefaults?)
Returns a configured MarkdownIt instance.
License
MIT. VS Code markdown styles adapted from Microsoft (MIT). See THIRD_PARTY_NOTICES.