{"_id":"@caizk/markdown-preview-enhanced","_rev":"2-ac3176e5a076729920832294a0f5b690","name":"@caizk/markdown-preview-enhanced","dist-tags":{"latest":"1.0.0"},"versions":{"0.1.0":{"name":"@caizk/markdown-preview-enhanced","version":"0.1.0","keywords":["react","markdown","markdown-preview","markdown-preview-enhanced","katex","mermaid","prism","component"],"author":{"name":"Yiyi Wang"},"license":"NCSA","_id":"@caizk/markdown-preview-enhanced@0.1.0","maintainers":[{"name":"choikeith","email":"aksoncai@gmail.com"}],"homepage":"https://github.com/Choi-Keith/markdown-preview-enhanced","bugs":{"url":"https://github.com/Choi-Keith/markdown-preview-enhanced/issues"},"dist":{"shasum":"c2c367968aab52082244dd47383841e015a18d15","tarball":"https://registry.npmjs.org/@caizk/markdown-preview-enhanced/-/markdown-preview-enhanced-0.1.0.tgz","fileCount":76,"integrity":"sha512-wCOT1FuwhhtXLzwWmE9Q2dGjxvRakZjTlOvZUCrFwPat0Qv37la9pat24lhkl49aAwsSnqAYEzJSVGPMY7oHBw==","signatures":[{"sig":"MEQCIFd9YwCJK1ZWZO3uHqq+793Vr6pemXAh8BuxW+vkfvMaAiB91K5vCoWApSZQPZVOiLCDynttCwnErPkbzbWV3BBMSw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":5746537},"main":"./dist/index.umd.js","types":"./dist/index.d.ts","unpkg":"./dist/index.umd.js","module":"./dist/index.esm.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","default":"./dist/index.esm.js"},"./umd":"./dist/index.umd.js","./katex.css":"./dist/katex.min.css","./styles.css":"./dist/styles.css","./package.json":"./package.json"},"gitHead":"2baaa5b4bb00cc3055195ddc68dc0eb6b42275dc","scripts":{"test":"npm run build && node --test test/*.test.mjs","build":"node scripts/build.mjs","fix:all":"eslint --fix \"src/**/*\" \"scripts/**/*\" && prettier --write \"src/**/*.*\" \"scripts/**/*.*\" \"docs/**/*.md\"","changelog":"node scripts/generate-changelog.mjs","check:all":"npm run check:eslint && npm run check:prettier","check:eslint":"eslint \"src/**/*\" \"scripts/**/*\"","check:prettier":"prettier --check \"src/**/*.*\" \"scripts/**/*.*\" \"docs/**/*.md\"","prepublishOnly":"npm run build && npm test"},"_npmUser":{"name":"choikeith","email":"aksoncai@gmail.com"},"jsdelivr":"./dist/index.umd.js","repository":{"url":"git+https://github.com/Choi-Keith/markdown-preview-enhanced.git","type":"git"},"_npmVersion":"10.8.2","description":"A React markdown preview component with KaTeX math, mermaid diagrams and syntax highlighting. Based on vscode-markdown-preview-enhanced.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"20.20.2","dependencies":{"katex":"^0.18.2","js-yaml":"^5.2.3","mermaid":"^11.16.1","prismjs":"^1.30.0","markdown-it":"^15.0.0","markdown-it-emoji":"^3.1.0","markdown-it-task-lists":"^2.1.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.2.8","eslint":"^10.8.1","esbuild":"^0.28.2","prettier":"^3.9.6","react-dom":"^19.2.8","@eslint/js":"^10.0.1","typescript":"^6.0.3","@types/katex":"^0.16.8","@types/react":"^19.2.18","@types/js-yaml":"^4.0.9","@types/prismjs":"^1.26.6","@types/react-dom":"^19.2.4","typescript-eslint":"^8.66.0","@types/markdown-it":"^14.1.2","@types/markdown-it-emoji":"^3.0.1"},"peerDependencies":{"react":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/markdown-preview-enhanced_0.1.0_1786249401930_0.44933252319326344","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@caizk/markdown-preview-enhanced","version":"1.0.0","description":"A React markdown preview component with KaTeX math, mermaid diagrams and syntax highlighting. Based on vscode-markdown-preview-enhanced.","keywords":["react","markdown","markdown-preview","markdown-preview-enhanced","katex","mermaid","prism","component"],"license":"NCSA","author":{"name":"Yiyi Wang"},"repository":{"type":"git","url":"git+https://github.com/Choi-Keith/markdown-preview-enhanced.git"},"bugs":{"url":"https://github.com/Choi-Keith/markdown-preview-enhanced/issues"},"homepage":"https://github.com/Choi-Keith/markdown-preview-enhanced","main":"./dist/index.umd.js","module":"./dist/index.esm.js","types":"./dist/index.d.ts","unpkg":"./dist/index.umd.js","jsdelivr":"./dist/index.umd.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","default":"./dist/index.esm.js"},"./styles.css":"./dist/styles.css","./katex.css":"./dist/katex.min.css","./umd":"./dist/index.umd.js","./package.json":"./package.json"},"sideEffects":["*.css"],"scripts":{"build":"node scripts/build.mjs","changelog":"node scripts/generate-changelog.mjs","test":"npm run build && node --test test/*.test.mjs","check:all":"npm run check:eslint && npm run check:prettier","check:eslint":"eslint \"src/**/*\" \"scripts/**/*\"","check:prettier":"prettier --check \"src/**/*.*\" \"scripts/**/*.*\" \"docs/**/*.md\"","fix:all":"eslint --fix \"src/**/*\" \"scripts/**/*\" && prettier --write \"src/**/*.*\" \"scripts/**/*.*\" \"docs/**/*.md\"","prepublishOnly":"npm run build && npm test"},"peerDependencies":{"react":">=17.0.0"},"engines":{"node":">=18"},"dependencies":{"js-yaml":"^5.2.3","katex":"^0.18.2","markdown-it":"^15.0.0","markdown-it-emoji":"^3.1.0","markdown-it-task-lists":"^2.1.1","mermaid":"^11.16.1","prismjs":"^1.30.0"},"devDependencies":{"@eslint/js":"^10.0.1","@types/js-yaml":"^4.0.9","@types/katex":"^0.16.8","@types/markdown-it":"^14.1.2","@types/markdown-it-emoji":"^3.0.1","@types/prismjs":"^1.26.6","@types/react":"^19.2.18","@types/react-dom":"^19.2.4","esbuild":"^0.28.2","eslint":"^10.8.1","prettier":"^3.9.6","react":"^19.2.8","react-dom":"^19.2.8","typescript":"^6.0.3","typescript-eslint":"^8.66.0"},"_id":"@caizk/markdown-preview-enhanced@1.0.0","gitHead":"a770ff7c07810fa9353e1f53ce10b328795dbbb0","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-pjsV+o6O+4K91KJ6Tx/OuXkXFKIOxI+Is20ftww0P/yPZJ2TcVymk6w9l1P3RvdErkB4KDhw1w/cz8cPTCloOA==","shasum":"ecb799ac0637345baab5a4ccf5a7f8a7b7aa7155","tarball":"https://registry.npmjs.org/@caizk/markdown-preview-enhanced/-/markdown-preview-enhanced-1.0.0.tgz","fileCount":77,"unpackedSize":5746655,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD2fQIt6XFu3lf7pzj9YVIFw/RQoZJsbpgOvgo9xwnlcwIgIZ3zE5NTlcodATsm6VBAu3sQEKYnXrPXiVZJNWR/T1w="}]},"_npmUser":{"name":"choikeith","email":"aksoncai@gmail.com"},"directories":{},"maintainers":[{"name":"choikeith","email":"aksoncai@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/markdown-preview-enhanced_1.0.0_1786250175425_0.2738746356545074"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-09T04:23:21.779Z","modified":"2026-08-09T04:36:15.837Z","0.1.0":"2026-08-09T04:23:22.171Z","1.0.0":"2026-08-09T04:36:15.656Z"},"bugs":{"url":"https://github.com/Choi-Keith/markdown-preview-enhanced/issues"},"author":{"name":"Yiyi Wang"},"license":"NCSA","homepage":"https://github.com/Choi-Keith/markdown-preview-enhanced","keywords":["react","markdown","markdown-preview","markdown-preview-enhanced","katex","mermaid","prism","component"],"repository":{"type":"git","url":"git+https://github.com/Choi-Keith/markdown-preview-enhanced.git"},"description":"A React markdown preview component with KaTeX math, mermaid diagrams and syntax highlighting. Based on vscode-markdown-preview-enhanced.","maintainers":[{"name":"choikeith","email":"aksoncai@gmail.com"}],"readme":"# @caizk/markdown-preview-enhanced\n\nA React markdown preview component with KaTeX math, mermaid diagrams, syntax\nhighlighting, GFM, emoji, task lists, wiki links and YAML front matter.\n\n> This package is a rewrite of\n> [vscode-markdown-preview-enhanced](https://github.com/shd101wyy/vscode-markdown-preview-enhanced)\n> as a standalone React component for the web. The original VS Code extension\n> and the underlying [crossnote](https://github.com/shd101wyy/crossnote)\n> library are by **Yiyi Wang** ([@shd101wyy](https://github.com/shd101wyy)).\n> Licensed under the NCSA license, same as the original project.\n\n## Features\n\n- GitHub Flavored Markdown: tables, strikethrough, task lists, autolinks\n- Math rendering with KaTeX (`$...$` and `$$...$$`)\n- Mermaid diagrams (flowcharts, sequence diagrams, ...) rendered client-side\n- Syntax highlighting with Prism (30+ languages, light/dark themes)\n- `:emoji:` shortcodes, `[[wiki links]]`, YAML front matter (table/code block)\n- Two built-in preview themes: `github-light` and `github-dark`\n- ESM, UMD and CDN builds; works with Vite, webpack, Next.js (client), or a\n  plain HTML page\n\n## Install\n\n```sh\nnpm install @caizk/markdown-preview-enhanced\n# or\nyarn add @caizk/markdown-preview-enhanced\npnpm add @caizk/markdown-preview-enhanced\n```\n\n## Quick start (ESM)\n\n```tsx\nimport { MarkdownPreview } from '@caizk/markdown-preview-enhanced';\nimport '@caizk/markdown-preview-enhanced/styles.css';\nimport '@caizk/markdown-preview-enhanced/katex.css'; // KaTeX stylesheet + fonts\n\nexport function App() {\n  return (\n    <MarkdownPreview\n      markdown={'# Hello :tada:\\n\\n$e^{i\\\\pi} + 1 = 0$'}\n      config={{ previewTheme: 'github-light', mermaidTheme: 'default' }}\n    />\n  );\n}\n```\n\n## Quick start (UMD via CDN)\n\n```html\n<link\n  rel=\"stylesheet\"\n  href=\"https://unpkg.com/@caizk/markdown-preview-enhanced@0.1.0/dist/styles.css\"\n/>\n<link\n  rel=\"stylesheet\"\n  href=\"https://unpkg.com/@caizk/markdown-preview-enhanced@0.1.0/dist/katex.min.css\"\n/>\n<div id=\"root\"></div>\n<script src=\"https://unpkg.com/react@18/umd/react.production.min.js\"></script>\n<script src=\"https://unpkg.com/react-dom@18/umd/react-dom.production.min.js\"></script>\n<script src=\"https://unpkg.com/@caizk/markdown-preview-enhanced@0.1.0/dist/index.umd.js\"></script>\n<script>\n  const { MarkdownPreview } = window.ReactMarkdownPreviewEnhanced;\n  ReactDOM.createRoot(document.getElementById('root')).render(\n    React.createElement(MarkdownPreview, { markdown: '# Hello :tada:' }),\n  );\n</script>\n```\n\nAn import-map / native-ESM version is in\n[`examples/simple/esm-cdn.html`](./examples/simple/esm-cdn.html).\n\n## Examples\n\n- [`examples/simple`](./examples/simple) — zero-build HTML pages (UMD script\n  tags and ESM import map)\n- [`examples/complex`](./examples/complex) — full Vite + React + TypeScript\n  app with a live editor and theme switches\n\n## API\n\n### `<MarkdownPreview>`\n\n| Prop        | Type                    | Default | Description                       |\n| ----------- | ----------------------- | ------- | --------------------------------- |\n| `markdown`  | `string`                | —       | Markdown source to render         |\n| `config`    | `MarkdownPreviewConfig` | `{}`    | Rendering options (see below)     |\n| `className` | `string`                | —       | Extra class on the root element   |\n| `style`     | `CSSProperties`         | —       | Inline styles on the root element |\n\n### `renderMarkdownToHtml(markdown, config?)`\n\nPure string → HTML function (no DOM, SSR safe). Mermaid blocks are emitted as\n`<pre class=\"rmpe-mermaid\">` placeholders; the `<MarkdownPreview>` component\nupgrades them to diagrams in the browser.\n\n### `MarkdownPreviewConfig`\n\n| Option                      | Type                                     | Default         |\n| --------------------------- | ---------------------------------------- | --------------- |\n| `previewTheme`              | `'github-light' \\| 'github-dark'`        | `'github-light'` |\n| `codeBlockTheme`            | `'light' \\| 'dark' \\| 'auto'`            | `'auto'`        |\n| `mermaidTheme`              | `'default' \\| 'dark' \\| 'forest' \\| 'neutral'` | `'default'` |\n| `mathRenderingOption`       | `'KaTeX' \\| 'None'`                      | `'KaTeX'`       |\n| `breakOnSingleNewLine`      | `boolean`                                | `true`          |\n| `enableLinkify`             | `boolean`                                | `true`          |\n| `enableTypographer`         | `boolean`                                | `false`         |\n| `enableEmoji`               | `boolean`                                | `true`          |\n| `enableTaskLists`           | `boolean`                                | `true`          |\n| `enableWikiLink`            | `boolean`                                | `true`          |\n| `frontMatterRenderingOption`| `'none' \\| 'table' \\| 'code block'`      | `'none'`        |\n| `enableRawHtml`             | `boolean`                                | `false`         |\n\nFull documentation: [`docs/USAGE.md`](./docs/USAGE.md)\n([中文文档](./docs/USAGE.zh-CN.md)).\n\n## Differences from the VS Code extension\n\nThis package reimplements the preview pipeline for the browser. Features that\ndepend on VS Code or Node.js are **not** included: code chunk execution,\npandoc/prince/ebook/PDF export, image upload, backlinks/graph view, scroll\nsynchronization, and reveal.js presentations.\n\n## License\n\n[NCSA](./LICENSE.md) — same as the original project, copyright Yiyi Wang.\n\n\n","readmeFilename":"README.md"}