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

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

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

生成目录

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

更新 2020-06-30: hugo-ivy 主题自带的目录功能其实就够用了，toc.js 暂时可以弃用了。使用 toc.js 每次打开文章都是内容先出来，然后才是目录嵌入进来，比较割裂，使用原生自带目录功能，整个页面是一起渲染出来的。另外主题源代码的逻辑是设置 show_toc: TRUE 才有目录，我改了下逻辑让它默认打开，设置 disable_toc: TRUE 才会禁止目录，但是这有引入另一个问题，如果文章确实没有各级标题，目录那里就会有一个灰色的长方形框，我的解决办法是 CSS 里设置 #TableOfContents:has(ul) {...}。

代码块增强

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，文章里的公式渲染速度肉眼可见的快了。