网页里一些有趣的功能增强演示
楚新元 / 2026-06-17
以下介绍的几个功能增强点基本上是基于谢益辉开发的 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，文章里的公式渲染速度肉眼可见的快了。
行内公式示例
`$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) $$
字段集
Title
: Content
效果如下：
- Title
Content
当然还可以更复杂点，你可以在里面嵌入代码，例如：
Title
: Content
```r
print("Hello world!")
```
显示效果如下：
- Title
Content
print("Hello world!")
益辉博客原文：Convert Definition Lists (<dl>) to Frames (<fieldset>)
一文。
右对齐引用脚注
> UNIX was not designed to stop its users from doing stupid things,
> as that would also stop them from doing clever things.
>
> --- Doug Gwyn
显示效果如下：
UNIX was not designed to stop its users from doing stupid things, as that would also stop them from doing clever things.
— Doug Gwyn
益辉博客原文：Some of My JS Tricks to Enhance the HTML Output of Markdown
键盘键效果
<code>Ctrl + C</code>
<kbd>Ctrl</kbd> + <kbd>V</kbd>
`Enter` `Shift`
显示效果如下：
Ctrl + C
Ctrl + V
Enter Shift
我推荐你用 <kbd>Key</kbd> 这种写法，屡试不爽。当然第一种方式也是很好的，只是最终它还会被转译成 <kbd>Key</kbd> 的形式。至于第三种方式，只支持部分常用的快捷键，例如：`F` 并不会被渲染为 F，而是会被渲染为 F。
益辉博客原文：Style Keyboard Keys and Shortcuts on Web Pages
搜索功能
可以点击本博客的搜索菜单体验。
益辉博客原文：Add Client-side Searching via Fuse.js to Static Sites
图片居中
用到的 JS 是 center-img.js，按照仓库里的介绍除了图片还可以居中视频和其它对象，目前我只用到图片居中。例如：
[](https://www.kernel.org/)
