sujingjhong.com

將 Hugo Prism.js 改為使用 highlight.js

基本設定 #

時隔多年，原先使用的 Prism.js 已經沒有再更新了 ，最近把它更換成 highlight.js。

首先把 hugo header 中有用到 Prism.js 的地方通通移除，感謝它這幾年的付出。

接著我把 highlight.js 設定寫在一個 partials/highlightjs.html

{{ $version := "11.9.0" }}
{{ $base_url := printf "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@%s/build" $version }}
{{ $langs := slice "bash" "css" "elixir" "excel" "ini" "javascript" "markdown" "php" "python" "shell" "plaintext" "http" "json" }}
<link rel="stylesheet" href="{{ $base_url }}/styles/default.min.css">
<script defer src="{{ $base_url }}/highlight.min.js"></script>
{{ range $langs }}
<script defer src="{{ $base_url }}/languages/{{ . }}.min.js"></script>
{{ end }}
<script defer>
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((el) => {
    hljs.highlightElement(el);
  });
});
</script>

由於 highlight.js 並沒有 auto loader，所以必須把需要的語法通通加載上去。

我這裡是搭配 ripgrep 把有用到的語言都放進去

rg '```\w+' -oNI | sort -u | rg '\w+' -o

全部支援的語言列表可以前往 官方網站 查詢，或者是到他們 存放庫 裡面的 build/languages。

最後在自訂 header 裡面只需要

{{ partial "highlightjs" . }}

更換顏色 #

highlight.js 可以 線上瀏覽 可用的語法色彩。

要更換就是把前面的 default.min.css 其中的 default 替換成想要的樣式名稱，例如我現在使用的 base16-gruvbox-dark-hard

- <link rel="stylesheet" href="{{ $base_url }}/styles/default.min.css">
+ <link rel="stylesheet" href="{{ $base_url }}/styles/base16/gruvbox-dark-hard.min.css">

另外注意，如果有用 base16- 開頭，它是放在 base16 資料夾底下。

詳細的資訊可以前往 存放庫 底下的 build/styles

程式碼複製功能 #

highlight.js 有支援擴充套件，所以可以自行撰寫套件或用別人的。

我這裡另外有用到 highlightjs-copy ，在程式碼區塊會浮現一個複製按鈕，就是它立大功。

一樣用 CDN 安裝，把上面的程式碼新增兩行：

<link
  rel="stylesheet"
  href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css"
/>
<script defer src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js" onload="hljs.addPlugin(new CopyButtonPlugin());"></script>

最後就變成：

{{ $version := "11.9.0" }}
{{ $base_url := printf "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@%s/build" $version }}
{{ $langs := slice "bash" "css" "elixir" "excel" "ini" "javascript" "markdown" "php" "python" "shell" "plaintext" "http" "json" }}
<link rel="stylesheet" href="{{ $base_url }}/styles/default.min.css">
+ <link rel="stylesheet" href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css" />
<script defer src="{{ $base_url }}/highlight.min.js"></script>
+ <script defer src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js" onload="hljs.addPlugin(new CopyButtonPlugin());"></script>
{{ range $langs }}
<script defer src="{{ $base_url }}/languages/{{ . }}.min.js"></script>
{{ end }}
<script defer>
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((el) => {
    hljs.highlightElement(el);
  });
});
</script>

參考資料 #