
知识管理知识库【免费下载链接】dendronThe personal knowledge management (PKM) tool that grows as you do!项目地址https://gitcode.com/gh_mirrors/de/dendron点击查看免费下载导读在 Dendron 的笔记体系中数学公式是不可或缺的内容形态——从概率统计推导到物理定律都依赖 LaTeX 语法的支撑。本指南聚焦 Dendron 仓库内置的 vendor/dendron-remark-math/readme.mdremark-math的 vendored 版本包名为dendronhq/remark-math讲解其如何将 Markdown 中的$...$与$$...$$数学标记解析为标准 AST 节点并配合 KaTeX 渲染为 HTML。读完本文你将掌握在 Dendron 笔记与发布站点中书写、转义、配置行内公式与块级公式的完整方案并理解其底层 tokenizer 与 compiler 的实现原理。什么是 remark-math一个 remark 数学解析/字符串化插件remark-math是 remark 生态中的一个插件职责非常纯粹parse and stringify math解析与序列化数学公式。它本身不负责渲染公式只负责在 Markdown 解析parser与序列化compiler两个环节中识别数学内容解析将$...$行内公式和$$...$$块级公式识别为 mdast 节点inlineMath与math而不是把它们当作普通文本或代码块字符串化在输出 Markdown 时把inlineMath/math节点还原为对应的$...$/$$...$$语法保证往返round-trip一致。在 Dendron 仓库中该插件以 vendored 形式存放于 vendor/dendron-remark-math其 package.json 声明包名为dendronhq/remark-math版本3.0.1MIT 许可同时各包的依赖清单中仍以remark-math3引入见 packages/unified/package.json 与 packages/engine-server/package.json。它“很有用”的场景是搭配渲染插件一起使用例如rehype-katex在 rehype 阶段把公式编译为 KaTeX HTMLremark-html-katex直接输出包含 KaTeX 的 HTML。Dendron 的发布/预览管线正是采用remark-mathrehype-katex的组合这一点可以从 packages/unified/src/utilsv5.ts 的导入语句中得到印证import math from remark-math与import katex from rehype-katex并列出现。安装与最小可用示例安装在任意使用 unified 管线的 Node 项目中安装npm install remark-math也可以按需引入子模块仅支持行内或仅支持块级公式const mathInline require(remark-math/inline) const mathBlock require(remark-math/block)这种拆分的依据是插件主体 index.js 只是把inline与block两个子插件串联起来function math(options) { var settings options || {} blockPlugin.call(this, settings) inlinePlugin.call(this, settings) }最小可用管线假设有example.mdLift($L$) can be determined by Lift Coefficient ($C_L$) like the following equation. $$ L \frac{1}{2} \rho v^2 S C_L $$用如下脚本处理unified 管线parse → math → rehype → katex → stringifyconst vfile require(to-vfile) const unified require(unified) const markdown require(remark-parse) const math require(remark-math) const remark2rehype require(remark-rehype) const katex require(rehype-katex) const stringify require(rehype-stringify) unified() .use(markdown) .use(math) .use(remark2rehype) .use(katex) .use(stringify) .process(vfile.readSync(example.md), function(err, file) { if (err) throw err console.log(String(file)) })运行node example后输出 HTML 的核心结构为行内公式$L$被渲染为span classmath math-inline…span classkatex…/span/span内部是 KaTeX 生成的mathsemantics…/semantics/math可访问性标记与aria-hiddentrue的视觉层行内公式$C_L$同样被渲染为math math-inline的 span下标L由 KaTeX 的 msupsub 结构呈现块级公式$$L \frac{1}{2} \rho v^2 S C_L$$被渲染为div classmath math-displayspan classkatex-display…/span/div。完整的 HTML 输出示意节选关键片段pLift(span classmath math-inlinespan classkatex…span classkatex-mathmlmathsemanticsmrowmiL/mi/mrowannotation encodingapplication/x-texL/annotation/semantics/math/spanspan classkatex-html aria-hiddentrue…/span/span/span) can be determined by Lift Coefficient (span classmath math-inline…miC/mimsubmiL/mi/msub…/span) like the following equation./p div classmath math-displayspan classkatex-displayspan classkatex…mfracmn1/mnmn2/mn/mfracmiρ/mimsupmiv/mimn2/mn/msupmiS/mimsubmiC/mimiL/mi/msub…/span/span/div由此可以看出两个层次的协作remark-math 负责划出数学边界并打上math/math-inline类名KaTeX 负责把 LaTeX 源码编译为可访问、可缩放的数学排版。API 详解remark().use(math[, options])基本用法remark().use(math[, options])该插件同时注入 parser 与 compiler在parser 阶段向remark-parse注入inlineTokenizers.math与blockTokenizers.math在compiler 阶段向remark-stringify注册visitors.inlineMath与visitors.math。具体实现见 inline.js 与 block.js两者都通过this.Parser/this.Compiler探测环境util.js 中的isRemarkParser/isRemarkCompiler判断是否存在blockTokenizers/visitors原型成员从而做到“既可在解析侧工作、也可在序列化侧工作”。仅支持行内或块级公式如果你只想支持其中一种语法可以直接引入子模块const mathInline require(remark-math/inline) unified() // … .use(mathInline) // …同理require(remark-math/block)只启用$$...$$块级公式。TypeScript 声明在 types/index.d.ts 中定义interface RemarkMathOptions { inlineMathDouble?: boolean } type Math Plugin[RemarkMathOptions?]options.inlineMathDouble类型boolean默认值false作用当行内公式使用双美元$$...$$书写时例如$$\alpha$$出现在段落内部默认仍按行内公式处理并标记math math-inline若设为true则额外追加一个math-display类使行内公式获得块级展示样式。底层实现在 inline.jstokenizer 生成节点时类名数组为classList.concat(double options.inlineMathDouble ? [mathDisplay] : [])其中classList [math, math-inline]、mathDisplay math-display。对应的序列化逻辑inline.js也会反向读取className若节点带有math-display类则用$$围栏输出否则用$。这一点在 test.js 中有对应测试use(math, {inlineMathDouble: true})解析$$alpha$$会得到className: [math, math-inline, math-display]而 test.js 验证字符串化时默认把双美元行内公式输出为单美元开启inlineMathDouble后则保留双美元。语法行为与转义规则转义Escaping美元符号可以用反斜杠转义避免被误判为公式边界\$\alpha\$ $\alpha\$$ $$ \beta\$ $$其语义拆解如下均有 test.js 用例覆盖\$\alpha$开头的\$被转义输出普通文本$后续\alpha$不会进入数学模式“should ignore an escaped opening dollar sign”$\alpha\$结尾的\$转义了闭门符整个内容按普通文本处理“should ignore an escaped closing dollar sign”\\$\alpha$双重反斜杠\\转义了转义符本身$仍可作为行内公式开闭符“should support a escaped escape before a dollar sign”数学模式内部依然可以使用转义的美元符号如$\alpha\$$表示公式内部含有\$字面量“should support a super factorial in inline math”块级公式$$\n\alpha\$\n$$同理test.js。与行内代码的交互行内代码中的美元符号不参与数学解析$\alpha$中反引号内的$被当作inlineCode“should ignore dollar signs in inline code”反引号可以出现在数学内容内部$\alpha$与 $\alpha$ 都被完整解析为行内公式“should allow backticks in math” / “should support backticks in inline math”。边界条件markdown-it-katex 兼容性用例test.js 中有一大批参照markdown-it-katex的回归用例可视为官方语法行为的权威清单值得逐条了解输入结果说明$11 2$math math-inline基础行内公式foo$11 2$barfoo span bar行内公式前后无空白也可以foo$-11 2$bar正常解析公式以负号开头没问题aaa $$ bbb普通文本空内容不渲染aaa $5.99 bbb普通文本缺少闭合分隔符foo $11\n\n 2$ bar两个段落行内公式不允许跨段换行foo $1 *i* 1$ barmath math-inline公式内部看起来像 Markdown 标记的内容不做二次处理$$\n 11 2\n $$math-display块级公式最多可缩进 3 个空格$$\n …precode缩进 4 个空格则退化为代码块foo $1 1\n 2$ barmath-inline行内公式允许单行换行$$\n\n 1\n 1\n\n 2\n\n$$math-display块级公式允许空行与多行$n$-th orderspan -th order行内公式后可直接跟文本$$\n11 2无闭合math-display文档末尾自动闭合* $11 2$\n* $$\n 11 2\n $$列表内的行内/块级公式列表项中均可使用$$11 2$$单行math-inline math-display开inlineMathDouble时单行块级公式退化为行内处理Foo \$1$ bar普通文本转义分隔符不触发数学模式$20,000/It is 2$ for…普通文本闭门符后跟数字不解析开门符前/后必须有非空白Money adds: $\$X \$Y \$Z$.math-inline数学模式内可用\$表示美元符号这些用例同时揭示了 tokenizer 的几条硬性规则见 inline.js开门符$之后不能紧跟空格或 Tab闭门符$之前不能是空格或 Tab之后不能紧跟数字用$$打开的行内公式闭合也必须用$$\会被跳过用于支持转义。块级公式的解析实现从 fence 到math节点块级 tokenizer 位于 block.js行为与“fenced code”高度相似但围栏字符是$跳过行首空格后统计$的个数围栏长度至少为 2minFenceCount 2打开围栏后同一行若再出现$则直接退出避免与行内数学互相干扰见 block.js逐行扫描跳过行尾空白后从右向左统计$作为闭合围栏只要闭合围栏长度 ≥ 打开围栏长度即判定为闭合行block.js内容行按打开围栏的缩进量做统一去除缩进处理生成节点{type: math, value: content, data: {hName: div, hProperties: {className: [math, math-display]}}}block.js。插件同时把math注入到interruptParagraph、interruptList、interruptBlockquote三组中断规则中block.js因此块级公式可以紧跟段落之后tango\n$$\n…见 test.js块级公式可以出现在引用块内 $$\n \alpha\beta\n $$可往返序列化test.js块级公式结束不会吞掉后续代码块$$\n\alpha\n$$\n\nbravo\n\ntest.js。字符串化侧block.js则简单地把math节点输出为$$…$$形式compiler 侧直接按div\n…\n/div结构还原。Dendron 中的实际应用发布与预览管线Dendron 在统一的发布/预览管线中启用数学支持。以 packages/unified/src/utilsv5.ts 为例处理 Markdown 时会按需挂载插件proc.use(math)见 utilsv5.ts 与 utilsv5.ts并在 rehype 阶段pRehype.use(katex)见 utilsv5.ts与 README 中推荐的remark-mathrehype-katex管线完全一致。浏览器端入口 packages/unified/src/utilsWeb.ts 也导入了同一插件保证前端预览与发布站点行为一致。在仓库的测试工作区中test-workspace/vault/dendron.ref.math.md 提供了真实笔记示例行内公式$f(x) sin(x)$渲染为行内数学块级公式$$ f(x) sin(x) $$渲染为独立展示块。这恰好对应 README 中example.md的行内/块级两种形态可以直接作为在 Dendron 笔记中书写数学公式的入门模板。安全须知使用remark-math本身不会把你暴露于跨站脚本XSS攻击它在解析侧只生成文本类型的 AST 节点不会擅自插入可执行内容。但数学公式的内容来自用户输入且最终会进入 HTML因此始终对用户输入保持警惕在渲染 HTML 之前使用rehype-sanitize等净化工具对 rehype 树进行消毒防止恶意构造的公式内容绕过过滤。Dendron 发布管线同样遵循“解析 → 渲染 → 净化”的通用安全模型建议在自定义 unified 管线中显式加入 sanitize 步骤。小结remark-math只负责在 Markdown 与 mdast/rehype 之间搬运数学语法$...$→inlineMath节点span.math.math-inline$$...$$→math节点div.math.math-display它同时具备解析与字符串化能力可与remark-stringify组合实现公式语法的无损往返公式的最终视觉渲染交给 KaTeXrehype-katexDendron 的发布与预览管线即采用该组合可参考 packages/unified/src/utilsv5.ts 中的.use(math)与.use(katex)调用转义规则与边界条件空格、数字、代码块、缩进、中断规则等是实际使用中最容易踩坑的地方vendor/dendron-remark-math/test.js 中 40 个用例给出了完备的行为清单若要精细控制行内双美元公式的展示样式使用inlineMathDouble: true选项追加math-display类即可。如需查看插件完整实现可继续阅读 vendor/dendron-remark-math/index.js、vendor/dendron-remark-math/inline.js、vendor/dendron-remark-math/block.js 与 vendor/dendron-remark-math/types/index.d.ts。赞分享知识管理知识库【免费下载链接】dendronThe personal knowledge management (PKM) tool that grows as you do!项目地址https://gitcode.com/gh_mirrors/de/dendron点击查看免费下载相关推荐OpCore-Simplify 快速上手指南四步构建你的第一套 OpenCore EFIOpCore Simplify 快速上手指南四步构建你的第一套 OpenCore EFI OpCore Simplify 是一个终端菜单式工具自动识别硬件、开发工具CLIPlantUML ASCII Math 公式渲染深入解析 math 包的实现原理与使用指南PlantUML ASCII Math 公式渲染深入解析 math 包的实现原理与使用指南 PlantUML 不仅可以用纯文本描述 UML 图还内置了一套开发工具文档Open-Meteo天气API3条命令免费搭建个人天气数据服务Open Meteo天气API3条命令免费搭建个人天气数据服务 Open Meteo 是一个开源天气数据服务非商业用途免费无需API密钥。它从各国气象机构后端API网关数据工程上一篇3分钟掌握SPT-AKI存档编辑器离线塔科夫终极修改神器下一篇3步解锁Windows图形加速Mesa-Dist-Win终极指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考