Hexo Syntax Highlighting (Tested Under Tranquilpeak)

Gary Gong

1 minute read

把這個主題弄 Syntax Highlighting 又是一番折騰，本來想說用prism.js做做，奈何就是在佈景上跟原始的佈景相衝，該高亮顯示的地方也沒有，索性走回頭路用highlight.js

基本上在 Hexo 佈景機制裡面加上一些 Code 就好，根據官網所述：

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

其中/path/to/styles/default.css基本上就是這個highlight.js的佈景即是， https://highlightjs.org/static/demo/ 這裡一票佈景，算是可以輕鬆找到要的。

如果說要用 CDN 的話，可以來這裡 https://cdnjs.com/libraries/highlight.js/ 翻翻，但是官網標配只含標準支援的程式碼 Highlighting 的功能，如果要額外的（比如說想用什麼 Julia 之類的），那得要自己去官網選配或是額外加 CDN，例如：

...
<!-- 標準配備 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<!-- 選配 Julia -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/julia.min.js"></script>
...

在 Hexo 佈景機制加上上述的東西，個人是放在 themes/tranquilpeak/layout/_partial/footer.ejs，可以動

比較重要的是，按理改完要在主題目錄下運行npm run prod，讓剛剛編輯的footer.ejs可以產出。

另外一個是，在 Hexo 根目錄下的_config.yml裡面：

...
highlight:
	enable: false
...

記得要把 enable 改成 false，不然會打架。

改完之後，hexo clean和 generate以及deploy記得做ㄛ

後記：使用深色佈景主題時，TRANQUILPEAK 會讓一些 TOKEN 反白

我當時看到快傻眼了，怎麼那麼難搞阿Q

看了 Web Inspector 之後才發現 Tranquilpeak 有寫關於 Tag 的 CSS code，其中寫道：

a.tag,
.tag {
  display: inline-block;
  background: #fff;
...
}

由於highlight.js把<script>、<html>等等這些含有「<」和「>」的東西統稱為tag們，在class理所當然理直氣壯的寫上去，然後就被 Tranquilpeak Theme 蓋了過去，所以難怪這些tag們的background都是白色的。

基本上，我的方案是這樣：

  1. 先在主題根目錄把 npm run start開起來
  2. 從主題根目錄往下找找到source/_css/components/_tag.scss
  3. 把以下的程式碼打上去
pre .tag{
  background : none;
}
  1. 開心收工，記得hexo clean和 generate以及deploy
無關緊要的後記

highlight.js 的官網滿滿的暗紅色看了眼睛好酸..

也看看

NGINX, MYSQL, PHP INSTALLATION (UBUNTU 16.04)

ZZZ我終於把 MATHJAX 弄進去了

comments powered by Disqus