网页里一些有趣的功能增强演示

Wed, 17 Jun 2026 14:51:42 +0800

以下介绍的几个功能增强点基本上是基于谢益辉开发的 JS 实现，有兴趣可以去翻他的博客，除了 Prism 语法高亮和 KaTeX 数学公式渲染相关的几个 JS 文件外，其它都在 lite.js 仓库。我在这里一方面是简单介绍下我用到的几个惊艳的功能，另一方面是方便我观察每次优化完博客后功能是否都正常。

生成目录

本文标题下面的目录是基于文章的章节标题自动生成的，如果你也想整一个，toc.js 值得你拥有。

代码块增强

print("Hello world!")
#> [1] "Hello world!"

语法高亮

益辉推荐的是 Prism.js，这个很轻量，默认的效果就很舒服，推荐下。

复制按钮

这个按钮设计非常巧妙，动画效果也非常棒。益辉博客原文：Add a Copy Button to Any Element on a Web Page 一文。

代码折叠

益辉博客原文：Code Folding with 6 Lines of Vanilla JavaScript 一文。

数学公式

益辉推荐的是 KaTeX，配合益辉开发的 math-code.js，效果几乎和 MathJax 一样，只是很少一部分语法不兼容，需要微调，但是它的轻量打动了我，果断换了 MathJax，文章里的公式渲染速度肉眼可见的快了。

行内公式示例

`$E=mc^2$` 是著名的质能方程。

$E=mc^2$ 是著名的质能方程。

独立公式示例

$$
f(x)=\frac{1}{\sqrt{2 \pi} \sigma} \exp \left(-\frac{(x-\mu)^2}{2 \sigma^2}\right)
$$

$$ f(x)=\frac{1}{\sqrt{2 \pi} \sigma} \exp \left(-\frac{(x-\mu)^2}{2 \sigma^2}\right) $$

网页技术 on 楚新元 | All in R