代码高亮 PrismJS 博客使用教程·Sakurairo 主题美化

Keywords: 代码 高亮 prismjs 美化 wordpress 博客 使用 教程 Sakurairo highlight 自定义 配置

Sakurairo 是一个国内作者开发的高自定义、丰富多彩的 WordPress 主题：

本次，笔者想要分享一下 Sakurairo 代码高亮的教程。

方案选择

主题设置

Sakurairo 在主题设置中提供了两种代码高亮样式：

默认的 Highlight.js 最为简单，但有不少问题
其次的 Prism.js 较为复杂，自定义度高，配置的当的话能够为站点增添一抹亮色。
自定义：你可以自定义 <pre><code></code></pre> 样式。

Highlight.js 问题

Bug: 有时不显示行号，原因未知；
在主题中默认非等宽字体，需要添加 CSS；
默认换行，移动端可能阅读不便（如 MediaInfo Ini 包含许多空格，换行会打乱格式）。

Prism.js 比较优势

轻量化：按需配置，避免额外内容占用带宽（比如一些你永远也用不到的语言高亮）；
扩展强大：支持自定义起始行、行号高亮、文件差异高亮、文件树、复制/下载按钮等等等等；
主题丰富：官网就有 8 种主题可供选择，还可以在社区中寻找更多样式。

本次笔者选用自定义配置，理由如下：

Pjax 会导致从主页 / tag / catecory 页面跳转至包含代码的页面时 Prism.js css 不加载（Highlight.js 也是）；
全局配置会导致不必要的页面多引入资源；
主题默认的 Prism.js 样式多一个额外占用一行的复制按钮，不美观，占用空间。

开始使用

下载

前往 Prismjs.com ，点击 Download；

按需下载：

Compression level 选择 Minified version 节省体积；
选择主题（本站代码主题为 Okaidia ）
选择语言（推荐选择个人需要的即可，本站包含 Markup CSS C-like Bash BBcode+Shortcode JavaScript HTTP Ini JSON LaTeX Markdown nginx PowerShell PHP Python Shell YAML）
选择插件（本站包含 Line Highlight Line Numbers Command Line Toolbar Copy to Clipboard Button Diff Highlight Treeview）
下载 CSS 和 JS（也可以通过此链接一步还原我的勾选 https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+bash+bbcode+diff+http+ini+json+latex+markdown+markup-templating+nginx+php+powershell+python+shell-session+yaml&plugins=line-highlight+line-numbers+command-line+toolbar+copy-to-clipboard+diff-highlight+treeview）

文件大小为未压缩，使用 Gzip 或 Brotli 压缩后传输将节省一半以上带宽

引入

先上传至服务器托管，也可以在稍后使用 cdnjs 或我的公共链接。

在需要的文章创建自定义 HTML 区块，引入 CSS、JS（方法见这里，若需要自行托管请替换链接为你网站的链接），粘贴后保存为可重用区块，下次引入更方便，且一旦更改区块内容全站同步，适用于更新高亮插件支持语言数量和额外功能。

添加代码块测试。输完代码后将区块作为 HTML 编辑，必须在 <code> 中添加 class="lang-xxx" （xxx为你的代码语言，如 <code class="lang-python">，忽略区块损坏。

额外功能生效

以下请修改 <pre> 或 <code>。

显示行号：<pre class="wp-block-code line-numbers">

代码高亮：<code class="lang-python"> python可替换为你的语言。无高亮：<code class="lang-plain">

换行：style="white-space:pre-wrap" （添加在 pre 中）

文件树：<code class="lang-treeview">

其他请查阅官网：https://prismjs.com/index.html#features-full

文件树测试：

RADWIMPS - 君の名は。
├── 01. 夢灯籠.flac
├── 02. 三葉の通学.flac
├── 03. 糸守高校.flac
├── 04. はじめての、東京.flac
├── 05. 憧れカフェ.flac
├── 06. 奥寺先輩のテーマ.flac
├── 07. ふたりの異変.flac
├── 08. 前前前世 (movie ver.).flac
├── 09. 御神体.flac
├── 10. デート.flac
├── 11. 秋祭り.flac
├── 12. 記憶を呼び起こす瀧.flac
├── 13. 飛騨探訪.flac
├── 14. 消えた町.flac
├── 15. 図書館.flac
├── 16. 旅館の夜.flac
├── 17. 御神体へ再び.flac
├── 18. 口噛み酒トリップ.flac
├── 19. 作戦会議.flac
├── 20. 町長説得.flac
├── 21. 三葉のテーマ.flac
├── 22. 見えないふたり.flac
├── 23. かたわれ時.flac
├── 24. スパークル (movie ver.).flac
├── 25. デート2.flac
├── 26. なんでもないや (movie edit.).flac
├── 27. なんでもないや (movie ver.).flac
├── [通常盤] BK
│   ├── IMG000.webp
│   ├── IMG001.webp
│   ├── IMG002.webp
│   ├── IMG003.webp
│   ├── IMG004.webp
│   ├── IMG005.webp
│   ├── IMG006.webp
│   ├── IMG007.webp
│   ├── IMG008.webp
......