公式、图表与乐谱

公式、图表与乐谱

Clarity 内置数学公式(KaTeX)、Mermaid 图表与 ABC 乐谱渲染,三者都以代码块或行内语法的形式书写。

数学公式

数学公式由 remark-math + rehype-katex 驱动,行内公式写作 $...$,块级公式写作 $$...$$:

行内公式:当 a≠0a \ne 0 时,方程 ax2+bx+c=0ax^2 + bx + c = 0 有两个解。

块级公式:

x=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

也可以用 math 代码块书写:

平均绩点(GPA)=∑(课程学分×课程绩点)∑课程学分\text{平均绩点(GPA)} = \frac{\sum(\text{课程学分} \times \text{课程绩点})}{\sum \text{课程学分}}
转义

正文中如需直接使用美元符号,请写成 \$,否则会被当作公式起始符。

图表

图表由 remark-code-component 插件实现:把 mermaid 代码块渲染为 Mermaid 图表。它会跟随亮暗模式重绘,进入视口附近才加载渲染器;超宽图表可横向滚动。

乐谱

同一插件也支持把 music-abc 代码块渲染为可播放的乐谱,语法参见 ABC notation:

实现方式

这三个能力的共同点是:在 nuxt.config.ts 的 remark 插件里,把特定语言的代码块映射为组件。图表映射到 Mermaid,乐谱映射到 MusicScore,因此 Markdown 作者无需关心渲染细节。

侧栏插槽与文章内插槽
代码块与高亮