【免费下载链接】comarkComark is an open-source Markdown parser and renderer with components, attributes and plugins. It streams AI output to React, Vue, Svelte, Angular, HTML and the terminal.项目地址https://gitcode.com/gh_mirrors/com/comark点击查看免费下载Comark 是一款开源的 Markdown 解析器与渲染器能把 Markdown 流式渲染到 React、Vue、Svelte、Angular、HTML 和终端。本文将带你用 Comark 代码高亮能力快速上手只需内置的 Shiki 插件几行配置就能为 Markdown 代码块加上多主题、多语言、行高亮等能力无需手写任何高亮逻辑。 为什么选 Comark 的 Shiki 代码高亮Comark 把 ShikiVite 同款高亮引擎封装成开箱即用的插件comark/plugins/shiki核心能力包括能力说明多主题同时指定light/dark两套配色切换主题零闪烁180 语言从代码围栏的语言标记自动识别并高亮行高亮支持{2-3,5}语法高亮指定行文件名片头用[server.js]在代码块上方显示文件名行内代码高亮行内代码声明lang后同样支持高亮按需打包core入口只加载你指定的主题和语言插件源码位于 packages/comark/src/plugins/shiki.ts最小化的核心入口在 packages/comark/src/plugins/shiki/core.ts完整的选项定义与说明可阅读 docs/content/4.plugins/1.built-in/shiki.md。⚠️ 注意comark/plugins/highlight是shiki的废弃别名见 packages/comark/src/plugins/highlight.ts新版本请统一使用comark/plugins/shiki。 一键安装步骤shiki是 peer 依赖安装命令如下npm install shiki如果要从shikijs/themes/shikijs/langs显式导入主题和语言推荐利于 tree-shakingnpm install shikijs/themes shikijs/langs只装shiki也可以直接用标准入口——它自带 Material 亮/暗两套主题以及vue、tsx、svelte、astro、typescript、javascript、bash、json、yaml等常用语言见 packages/comark/src/plugins/shiki.ts。 零配置快速开始import { parseMarkdown } from comark import shiki from comark/plugins/shiki const result await parseMarkdown(content, { plugins: [shiki()] })一行shiki()完成全部配置。在框架组件里同样简单以 Vue 为例template Suspense Markdown :plugins[shiki()]{{ content }}/Markdown /Suspense /template 双主题light/dark配置方法多主题是 Shiki 插件的招牌能力两套配色会以 CSS 变量形式内嵌到每个span上切换深浅模式时不会出现颜色闪烁。import shiki from comark/plugins/shiki import githubLight from shikijs/themes/github-light import githubDark from shikijs/themes/github-dark const plugins [ shiki({ themes: { light: githubLight, dark: githubDark } }) ]配合官方示例项目 examples/3.plugins/vue-vite-highlight还能一键切换主题、加载 Python、Rust、Go、SQL 等语言配置写法参见 App.vue完整说明见 examples/3.plugins/vue-vite-highlight/README.md。✨ 行高亮与文件名片头Comark 在代码围栏上扩展了两个实用语法行高亮——被标记的行会加上.highlight类javascript {2-3,5} function example() { const a 1 // 高亮 const b 2 // 高亮 const c 3 return a b c // 高亮 } 文件名片头——在代码块顶部显示文件名标签javascript [server.js] const app express() 对应的样式只需少量 CSSVue 作用域样式记得用:deep()html.dark .shiki span { color: var(--shiki-dark) !important; background-color: var(--shiki-dark-bg) !important; } 最小打包core 入口标准入口会打包 Material 主题和默认语言。如果你的页面只需要两三种语言可以改用comark/plugins/shiki/core——此时themes和languages为必填项只加载你导入的内容import shiki from comark/plugins/shiki/core import javascript from shikijs/langs/javascript import githubDark from shikijs/themes/github-dark const plugins [ shiki({ languages: [javascript], themes: { dark: githubDark } }) ]框架包也提供同样的嵌套入口例如comark/vue/plugins/shiki/core、comark/react/plugins/shiki/core。 进阶玩法Transformers传入任意 Shiki transformer即可实现 diff 标注[!code ]/[!code --]、聚焦行、自定义类名等transformers选项定义见 packages/comark/src/internal/shiki.ts。行内代码高亮RefHTMLInputElement | null{langts-type}这样声明语言的行内代码也会被高亮内置ts-type、vue-html两种片段语言可用inlineCode: false关闭。preStyles设为true时按当前主题为pre添加内联背景/前景色。✅ 总结场景推荐做法快速上手shiki()零配置标准入口官网级双主题themes: { light, dark } 少量 CSS控制包体积core入口 精确导入语言/主题教程/博客排版行高亮{2-3} 文件名片头用 Comark 的 Shiki 插件从「一行配置」到「多主题 行高亮 文件名片头」都是一站式完成非常适合文档站、博客和 AI 流式输出场景。更多细节请查阅官方文档 docs/content/4.plugins/1.built-in/shiki.md动手练习可参考 examples/3.plugins/vue-vite-highlight 示例项目。赞分享【免费下载链接】comarkComark is an open-source Markdown parser and renderer with components, attributes and plugins. It streams AI output to React, Vue, Svelte, Angular, HTML and the terminal.项目地址https://gitcode.com/gh_mirrors/com/comark点击查看免费下载相关推荐Varlet UI 代码块组件 Code 与 Shiki 高亮集成实战指南Varlet UI 代码块组件 Code 与 Shiki 高亮集成实战指南 导读 Code 是 Varlet UI 中用于在页面内展示带语法着色代码高亮代UI组件前端Defuddle 代码块标准化实战从 Mintlify / Shiki 高亮页面提取干净的 Markdown 围栏Defuddle 代码块标准化实战从 Mintlify / Shiki 高亮页面提取干净的 Markdown 围栏 导读 本文以 tests/expected后端TypeDoc 语法高亮实战用 Shiki 让文档中的代码块亮起来TypeDoc 语法高亮实战用 Shiki 让文档中的代码块亮起来 TypeDoc 在渲染 Markdown 文档和文档注释时会通过内置的 Shiki开发工具文档上一篇Ray 文档示例 Notebook 编写指南基于 MyST 模板 template.md 的完整实战下一篇chezmoi 的 promptString 模板函数在 chezmoi init 中交互式采集配置数据创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考