{"_id":"@bamaolink/markdown-html-viewer","name":"@bamaolink/markdown-html-viewer","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@bamaolink/markdown-html-viewer","private":false,"version":"1.0.0","description":"A powerful markdown renderer with syntax highlighting, math formulas, diagrams, and custom containers","author":"","license":"MIT","type":"module","main":"./dist/markdown-html-viewer.cjs","module":"./dist/markdown-html-viewer.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/markdown-html-viewer.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/markdown-html-viewer.cjs"}},"./web-component":{"import":{"types":"./dist/web-component.d.ts","default":"./dist/web-component.js"},"require":{"types":"./dist/web-component.d.ts","default":"./dist/web-component.cjs"}},"./style.css":"./dist/markdown-html-viewer.css"},"sideEffects":["**/*.css","**/web-component*.ts"],"scripts":{"dev":"vite","build":"tsc && vite build","build:lib":"vite build --mode lib && tsc -p tsconfig.build.json","test":"vitest run","test:watch":"vitest","preview":"vite preview","prepublishOnly":"npm run build:lib"},"keywords":["markdown","markdown-it","renderer","syntax-highlighting","prism","katex","mermaid","web-component","custom-elements"],"repository":{"type":"git","url":"git+https://github.com/bamaolink/markdown-html-viewer.git"},"bugs":{"url":"https://github.com/bamaolink/markdown-html-viewer/issues"},"homepage":"https://github.com/bamaolink/markdown-html-viewer#readme","dependencies":{"katex":"^0.16.40","markdown-it":"^14.1.1","markdown-it-anchor":"^9.2.0","markdown-it-emoji":"^3.0.0","mermaid":"^11.13.0","prismjs":"^1.30.0"},"devDependencies":{"@tailwindcss/typography":"^0.5.19","@tailwindcss/vite":"^4.2.2","@types/katex":"^0.16.7","@types/markdown-it":"^14.1.2","@types/markdown-it-emoji":"^3.0.1","@types/prismjs":"^1.26.6","esbuild":"^0.27.4","tailwindcss":"^4.2.2","typescript":"~5.9.3","vite":"^8.0.1","vitest":"^4.1.1"},"_id":"@bamaolink/markdown-html-viewer@1.0.0","gitHead":"8496c5990a1d63409c9673026cfec577239c71e6","_nodeVersion":"24.14.0","_npmVersion":"11.6.0","dist":{"integrity":"sha512-W4d5aP7i5iQUQLLiQdIkJYd7cUU2RqeQ0U47w+TAc6t3AG89wm8Z6XARNvJZ0EW0ELoMvknhnvyCt/lMpecWxA==","shasum":"a33e15bf82f61c00f5094eb2d3996154e863ce36","tarball":"https://registry.npmjs.org/@bamaolink/markdown-html-viewer/-/markdown-html-viewer-1.0.0.tgz","fileCount":25,"unpackedSize":1998131,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC33+0Dmz7FhRFW4C0s2hVbXMPKqTUrA/hxJtN1UGZQvAIgG1JWu7RnLwla+8EkCKV6mcByV1Mg7PBPCU7UVhT5IOE="}]},"_npmUser":{"name":"bamaolink","email":"63401208@qq.com"},"directories":{},"maintainers":[{"name":"bamaolink","email":"63401208@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/markdown-html-viewer_1.0.0_1774530544570_0.5857450567538989"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-26T13:09:04.511Z","1.0.0":"2026-03-26T13:09:04.868Z","modified":"2026-03-26T13:09:05.046Z"},"maintainers":[{"name":"bamaolink","email":"63401208@qq.com"}],"description":"A powerful markdown renderer with syntax highlighting, math formulas, diagrams, and custom containers","homepage":"https://github.com/bamaolink/markdown-html-viewer#readme","keywords":["markdown","markdown-it","renderer","syntax-highlighting","prism","katex","mermaid","web-component","custom-elements"],"repository":{"type":"git","url":"git+https://github.com/bamaolink/markdown-html-viewer.git"},"bugs":{"url":"https://github.com/bamaolink/markdown-html-viewer/issues"},"license":"MIT","readme":"# @bamaolink/markdown-html-viewer\n\n一个功能丰富的 Markdown 渲染器，支持代码高亮、数学公式、Mermaid 图表、自定义容器等，同时提供 JavaScript API 和 Web Component 两种使用方式。\n\n## 特性\n\n- **代码高亮** — 基于 Prism.js，支持行号、语言标签、一键复制\n- **数学公式** — 基于 KaTeX，支持行内 `$...$` 和块级 `$$...$$`\n- **Mermaid 图表** — 流程图、时序图、甘特图等\n- **自定义容器** — tip / warning / danger / info / success / details\n- **任务列表** — 带自定义复选框样式\n- **分页符** — `:::pagebreak` 语法\n- **上下标** — `^上标^` 和 `~下标~`\n- **Emoji** — `:emoji_name:` 语法\n- **锚点导航** — 自动生成标题锚点，支持 TOC 联动高亮\n- **明暗主题** — 跟随系统 `prefers-color-scheme` 自动切换\n- **Web Component** — `<markdown-html-viewer>` 自定义元素，import 即用\n\n## 安装\n\n```bash\npnpm add @bamaolink/markdown-html-viewer\n```\n\n## 使用\n\n### JavaScript API\n\n```ts\nimport { MarkdownHtmlRender } from \"@bamaolink/markdown-html-viewer\";\n\nconst viewer = document.getElementById(\"viewer\")!;\nconst toc = document.getElementById(\"toc\")!;\n\nconst md = new MarkdownHtmlRender({ viewer, toc });\nmd.init();\nmd.value = \"# Hello World\";\n```\n\n### Web Component\n\n```html\n<script type=\"module\">\n  import \"@bamaolink/markdown-html-viewer/web-component\";\n</script>\n\n<markdown-html-viewer value=\"# Hello World\"></markdown-html-viewer>\n```\n\n通过 JS 动态设置内容：\n\n```js\nconst el = document.querySelector(\"markdown-html-viewer\");\nel.value = \"# 新内容\\n\\n支持 **Markdown** 语法\";\n```\n\n显示 TOC 目录：\n\n```html\n<!-- attribute 方式 -->\n<markdown-html-viewer toc value=\"# Hello\"></markdown-html-viewer>\n```\n\n```js\n// property 方式\nel.options = { showToc: true };\n\n// 访问 TOC 容器元素（可自行定位/样式化）\nel.tocElement; // HTMLDivElement\n```\n\n传入 markdown-it 配置：\n\n```js\nel.options = {\n  showToc: true,\n  markdownItOptions: { html: true, breaks: true },\n};\n```\n\n### 单独引入样式\n\n如果使用 JavaScript API 方式，样式会随模块自动加载。也可以单独引入：\n\n```ts\nimport \"@bamaolink/markdown-html-viewer/style.css\";\n```\n\n## API\n\n### `MarkdownHtmlRender`\n\n| 属性/方法 | 类型 | 说明 |\n|---|---|---|\n| `constructor(opts)` | `MarkdownHtmlRenderOptions` | 创建实例 |\n| `init()` | `() => void` | 初始化 markdown-it 及所有插件 |\n| `value` | `string` | 设置/获取 Markdown 内容，赋值后自动渲染 |\n\n### `MarkdownHtmlRenderOptions`\n\n| 字段 | 类型 | 必填 | 说明 |\n|---|---|---|---|\n| `viewer` | `HTMLElement` | 是 | 渲染输出的容器元素 |\n| `toc` | `HTMLElement` | 否 | TOC 目录容器，传入后自动生成目录并高亮当前标题 |\n| `markdownItOptions` | `markdown-it.Options` | 否 | 覆盖默认的 markdown-it 配置 |\n\n### `<markdown-html-viewer>` Web Component\n\n| 属性 | 类型 | 方式 | 说明 |\n|---|---|---|---|\n| `value` | `string` | attribute / property | Markdown 内容 |\n| `toc` | `boolean` | attribute | 是否显示 TOC 目录（布尔属性，添加即启用） |\n| `options` | `WebComponentOptions` | property | 渲染配置 |\n| `tocElement` | `HTMLDivElement \\| null` | property (只读) | TOC 容器元素 |\n\n### `WebComponentOptions`\n\n| 字段 | 类型 | 说明 |\n|---|---|---|\n| `showToc` | `boolean` | 是否显示 TOC（优先级高于 `toc` attribute） |\n| `toc` | `HTMLElement` | 自定义外部 TOC 容器元素 |\n| `markdownItOptions` | `markdown-it.Options` | 覆盖默认的 markdown-it 配置 |\n\n## 自定义容器语法\n\n```markdown\n:::tip 提示标题\n这是一段提示内容。\n:::\n\n:::warning\n默认标题为\"警告\"。\n:::\n\n:::danger 危险操作\n请谨慎操作！\n:::\n\n:::info\n信息说明。\n:::\n\n:::success\n操作成功。\n:::\n\n:::details 点击展开\n折叠内容。\n:::\n```\n\n## 项目结构\n\n```\nsrc/\n  lib/                        # 库代码（发布到 npm）\n    index.ts                  # 主入口，导出 MarkdownHtmlRender\n    types.ts                  # 类型定义\n    renderer.ts               # 核心渲染类\n    toc.ts                    # TOC 导航 IntersectionObserver\n    web-component.ts          # <markdown-html-viewer> 自定义元素\n    plugins/                  # markdown-it 插件\n      container/              # 自定义容器 :::tip / :::warning 等\n      math/                   # KaTeX 数学公式\n      mermaid/                # Mermaid 图表\n      pagebreak/              # 分页符\n      prism/                  # 代码高亮（行号、复制按钮）\n      sub/                    # 下标\n      sup/                    # 上标\n      taskLists/              # 任务列表\n    styles/                   # 模块化 CSS\n      index.css               # 汇总入口\n      theme.css               # 明暗主题变量\n      base.css                # 基础排版\n      elements.css            # HTML 元素样式\n      toc.css                 # TOC 目录导航\n      code-block.css          # 代码块\n      task-list.css           # 任务列表\n      container.css           # 自定义容器\n      pagebreak.css           # 分页符\n      mermaid.css             # Mermaid 图表\n  demo/                       # 开发调试用 Demo（不随包发布）\n    main.ts\n    style.css\n```\n\n## 开发\n\n```bash\n# 启动开发服务器\npnpm dev\n\n# 构建库\npnpm build:lib\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-4bada0cf452755909c313a200f926990"}