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

以下介绍的几个功能增强点基本上是基于谢益辉开发的 JS 实现，有兴趣可以去翻他的博客，所有的 JS 文件都在 lite.js 仓库。我在这里一方面是简单介绍下我用到的几个惊艳的功能增强，另一方面是方便我观察每次优化完博客后功能是否都正常。

生成目录

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

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

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

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

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

`$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
    ```r
    print("Hello world!")
    ```

显示效果如下：

Title

Content

print("Hello world!")

> 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

<code>Ctrl + C</code>
<kbd>Ctrl</kbd> + <kbd>V</kbd>
`Enter`

显示效果如下：

Ctrl + C

Ctrl + V

Enter

我推荐你用 <kbd>Key</kbd> 这种写法。

可以点击本博客的搜索菜单体验。

用到的 JS 是 center-img.js，按照仓库里的介绍除了图片还可以居中视频和其它对象，目前我只用到图片居中。例如：