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

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

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

方案选择

主题设置

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

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

Highlight.js 问题

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

Prism.js 比较优势

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

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

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

开始使用

下载

前往 Prismjs.com ，点击 Download；

按需下载：

  1. Compression level 选择 Minified version 节省体积；
  2. 选择主题（本站代码主题为 Okaidia ）
  3. 选择语言（推荐选择个人需要的即可，本站包含 Markup CSS C-like Bash BBcode+Shortcode JavaScript HTTP Ini JSON LaTeX Markdown nginx PowerShell PHP Python Shell YAML）
  4. 选择插件（本站包含 Line Highlight Line Numbers Command Line Toolbar Copy to Clipboard Button Diff Highlight Treeview）
  5. 下载 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
......

最后

享受创作！

CODE IS POETRY.