Hexo Volantis 主題中簡單調整語法突顯顏色與字體大小

Syntax Highlight（語法突顯或語法高亮） 是指在顯示程式碼時，通過不同的顏色來區分語法元素，以提升程式碼的可讀性。

在 Hexo 以及 Hexo Volantis 主題中，也具備這項功能。先前 blog 都是使用預設顏色，某些顏色搭配後視覺對比不夠明顯，閱讀起來會有點吃力。基於這個原因，最近開始嘗試在 Volantis 主題的各種設定與檔案中尋找調整的方法。

經過一段時間的探索和測試，大致了解了需要修改的檔案。為避免時間久了遺忘這些調整，決定做個紀錄。

本篇僅對顏色和字體大小等參數進行簡單調整，並沒有使用太複雜的方法，例如建立新的設定檔或引用特殊資源。尚不確定是否存在更簡單的方式，若未來有新發現，再進行更新或調整。

調整前的狀況

首先，來看看調整前程式碼在博客中的顯示效果。

如下圖，底色參考了 VS Code 暗系模式的背景色，

但是個人認為，不管是關鍵字也好，類別名稱也好，或是普通的內文，

不過，在閱讀上無論是關鍵字、類別名稱，還是普通文本，

文字與背景色之間的對比都不太理想，字體大小也偏小，

開始調整前

在開始調整之前，先展示一下個人調整前後與 highlight 相關固定不變的配置設定，

首先是 Hexo 的 _config.yml，其中有關 highlight 相關設定如下，

基本上這些設定與預設值相差不大，

1
2
3
4
5
6
7

syntax_highlighter: highlight.js
highlight:
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

再來是 Volantis 主題的 _config.yml 中與程式碼區塊和 highligt 相關的設定，

個人偏好用暗系主題，因此程式碼區塊的背景顏色參考了 VS Code 暗系主題的顏色，

此外，Volantis 主題會根據滑鼠在程式碼區塊內外的位置套用不同的背景色，

個人不太需要此效果，因此將 block 和 codeblock 設定為相同的顏色，

1
2
3
4
5
6
7
8
9
10
11

plugins:
  code_highlight: highlightjs # highlightjs or prismjs
  highlightjs:
    copy_code: true
    
    
color_scheme:
  dark:
    block: '#0F0F0F'
    codeblock: '#0F0F0F'
    inlinecode: '#D56D28'

顏色與文字大小調整

顏色調整

highlight 中的顏色設定位於 color.styl 檔案中，

這個檔案可以在建立的 Hexo blog 資料夾中的以下路徑找到，

“\node_modules\hexo-theme-volantis\source\css_style_plugins_highlight\highlightjs\color.styl”

開啟檔案後，可以看到顏色的設定，

以下是其中一部分的內容，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

$hl-keyword = #9c27b0
$hl-blue = #1E80F0
$hl-cyan = #17AFCA
$hl-green = #3FA33F
$hl-light-blue = #6ECDF9
$hl-red = #EE2B29
$hl-orange = #FB3F1B
$hl-amber = #FD8607
$hl-text = alpha($color-text, .9)
.highlight pre
  // 行
  .line,.params
    color: $hl-text

  .line .addition
    color: $hl-green
  .line .deletion
    color: $hl-red

  .marked
    background-color: alpha(#FED542, .4)
    padding: 2px 8px 2px 0
    border-radius: 2px
    width: 100%

  .title, .attr, .attribute
    color: $color-md-indigo

  // 註解
  .comment
    color: #449E48

  .keyword, .meta-keyword, .javascript .function
    color: $hl-keyword

  .type, .built_in, .tag .name
    color: $color-md-light-blue

  .variable, .regexp, .ruby .constant, .xml .tag .title, .xml .pi, .xml .doctype, .html .doctype, .css .id, .css .class, .css .pseudo
    color: $hl-amber

個人也是第一次看到這種格式的檔案，

但有程式經驗的人，應該一看就能理解架構

個人理解大致上分兩個部分，

• 變數定義

前面的部分，就像一般寫程式時的變數設定，

先賦值給變數名稱，後面就能反覆使用，

1
2
3
4
5
6
7
8
9

$hl-keyword = #9c27b0
$hl-blue = #1E80F0
$hl-cyan = #17AFCA
$hl-green = #3FA33F
$hl-light-blue = #6ECDF9
$hl-red = #EE2B29
$hl-orange = #FB3F1B
$hl-amber = #FD8607
$hl-text = alpha($color-text, .9)

• 樣式設定

程式碼的結構由不同的語法元素組成，例如關鍵字、變數、型態、註解等。

Highlight.js 會分析程式碼的語法結構並為每個元素指定對應的名稱，然後套用相應的顏色設定，

這些顏色設定可以透過事先定義好的變數，或者直接使用色碼。

例如，在下面的範例中：

1. .comment 是針對註解的樣式設定，其 color 被設為 #449E48
2. 用逗號來分隔多個選擇器，並同時應用相同的樣式設定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.highlight pre
  // 行
  .line,.params
    color: $hl-text

  // 註解
  .comment
    color: #449E48

  .keyword, .meta-keyword, .javascript .function
    color: $hl-keyword

  .type, .built_in, .tag .name
    color: $color-md-light-blue

  .variable, .regexp, .ruby .constant, .xml .tag .title, .xml .pi, .xml .doctype, .html .doctype, .css .id, .css .class, .css .pseudo
    color: $hl-amber

若不確定程式碼的某部分屬於哪種區塊，

可以啟動 hexo server，並使用瀏覽器的開發工具來查看，

以 Chrome 為例，在開發模式中按下 “Select an element in the page to inspect it”，

然後選取希望查看的區塊，

如下圖所示，若想要更改 MainWindowViewModel 類別名稱的顏色，

檢查後可見該區塊屬於 title 類別。

接著在 color.styl 中找到 .title 的設定，

原本顏色為 $color-md-indigo，將其修改為 #7FDDFC，

1
2

.title, .attr, .attribute
  color: #7FDDFC

重新啟動伺服器後，

即可看到文字顏色變為設定的顏色，

其他文字區塊的顏色也可以依此方式修改，

以下是個人完成調整後的效果。

經過一輪調整後，發現有一種區塊無法更改顏色。

根據瀏覽器中顯示的顏色，追蹤之後終於在另一個 styl 檔案中找到，

路徑為：

“\node_modules\hexo-theme-volantis\source\css_style_plugins_dark\dark_plugins.styl”

開啟檔案後，找到下面的內容，

將 .highlight pre .line, .highlight pre .params 下的 color 修改成所需的顏色即可，

1
2
3
4
5
6
7
8
9

//highlight
if hexo-config('plugins.code_highlight') == "highlightjs"
  .gutter
    background: var(--color-card) !important
    background-color: var(--color-card) !important
  .highlight figcaption
    background-color: #14161a
  .highlight pre .line, .highlight pre .params
    color: rgba(158, 142, 142, 0.9) // 預設顏色，個人將它改為白色

於是乎，下圖則是顏色調整後的結果，

文字大小調整

調整完顏色之後，發現文字的大小有些偏小。

這部分可以直接在 Volantis 主題的 _config.yml 中進行設定。

打開 _config.yml 後，找到 custom_css 區塊下的 fontsize，

其中 code 是控制程式碼區塊的文字大小。

預設值為 0.875rem，可依需求調整大小（1 rem 約等於 16 px），

也可以直接使用 px 為單位。

1
2
3
4
5
6
7

custom_css:
...
  fontsize:
  ...
    meta: .875rem
    code: .875rem # here
    footnote: .78125rem

同場加映

程式碼語言資訊

在程式碼區塊中，會顯示出當前的程式碼語言，如下圖所示。

不過，某些語言 (例如 C#)在預設設定中可能沒有支援。

如果遇到這種情況，可以手動新增語言標籤。

前往以下路徑，

“\node_modules\hexo-theme-volantis\source\css_style_plugins_highlight\highlightjs\language.styl”

開啟 language.styl 檔案後，可以發現檔案中存在某種結構規律，

在 &. 和 :before 之間的部分，是在 Markdown 中指定語言的名稱，

而 content 是轉換成 HTML 後所要顯示的名稱。

1
2

&.languageName:before
  content: "Display Name"

因此，若想要加入 C# 和 XML，可以像下面這樣撰寫，

這樣就能在程式碼區塊中，正確顯示 C# 和 XML 的語言標籤了。

1
2
3
4

&.csharp:before
  content: "C#"
&.xml:before
  content: "XML"

結論

經過以上調整後，程式碼區塊的文字顏色對比度有了改善，整體可讀性也有所提升。雖然色彩豐富程度不及 IDE，但僅作為 blog 閱讀用途，稍微有區別的配色已經足夠。

也因此尚未深入研究識別標籤或語法辨別，或者探索更簡便的插件。