highlight.js 的介紹文章貼在後面.

highlight.js 加行號


一開始在痞客邦套用 highlight.js 時, 沒有找到可以設定行號的功能. 隨後又在它的文件網站上看到作者希望保持原本 highlight.js 的設計初衷 "單純" (simplicity). 不只是程式上的單純化, 還有應用上的單純化, 簡單化. 因此原作者也就堅持不加上行號的功能(註一). 所以使用時也就沒有多想, 沒有行號就沒有行號唄.

後來 (2016/10/19) 不經意在 GitHub 上發現有人幫它寫了個加行號的 plugin(註二). 當時因為工作比較忙, 只是簡單的記錄下來, 想說以後有空再試吧. 沒想到一放就是好幾年, 今天清理未完成的貼文時看到它, 那就馬上來試試吧!

註一: 原文參見 https://highlightjs.readthedocs.io/en/latest/line-numbers.html.

註二: Plugin 的 GitHub 網址: https://github.com/wcoder/highlightjs-line-numbers.js/

highlightjs-line-numbers.js 使用方法


使用時, 貼程式的地方和 highlight.js 一樣. 同樣的程式的第一行要緊接在 <code> tag 之後.

<div><pre>
<code class="C">從這裡開始寫你要上色的程式碼
...
你要上色的程式碼
...
</code>
</pre></div>

差別只在引入 highlight.js 之後附加一行 (line 3) 引入 highlightjs-line-numbers.js. 還有, 執行 hljs.initHighlightingOnLoad(); 之後, 附加執行 hljs.initLineNumbersOnLoad(); (line 6). 同樣的痞客邦會阻我們執行自定義的 JS 程式, 所以: <script> tag 後面要加 <!--, </script> tag 前面要加 -->.

另外 hljs.initLineNumbersOnLoad(); 預設不會幫只有一行的程式段附加行號. 如果真的有這個需要, 可以附帶參數 {singleLine: true}只有一行的程式段也可以附加行號.

<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.1/styles/night-owl.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.1/highlight.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js" type="text/javascript"></script>
<script><!--
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad({singleLine: true});
--></script>

如果你在套用 highlightjs-line-numbers.js 之後, 還有自己客製化的需要, 它也很貼心的為大家準備了一些 selector.

CSS selector描述
.hljs-ln-line選擇整個上色的程式 (包含行號部份)
.hljs-ln-line[data-line-number="i"]選擇第i行程式 (包含行號部份)
.hljs-ln-numbers選擇整個行號部份
.hljs-ln-numbers[data-line-number="i"]選擇第i行行號
.hljs-ln-code選擇整個上色的程式 (不包含行號)
.hljs-ln-code[data-line-number="i"]選擇第i行程式 (不包含行號)

highlightjs-line-numbers.js 自定義 CSS


當然我們免不了有時會需要自定義 CSS. 但是這又會觸犯到痞客邦不給手機版自定義 CSS 的潛規則. 比較容易的方法是把以下的程式碼直接貼在文章的最後面:

<p id="myCSS"></p>
<script><!--
document.getElementById("myCSS").outerHTML=[
  '<style type="text/css">'
 ,'.article-content-inner .hljs { line-height:1.1em; padding:.25em }'
 ,'.article-content-inner .hljs td.hljs-ln-numbers { text-align:right; padding-right:4px}'
 ,'.article-content-inner .hljs td.hljs-ln-code { border-left:2px solid #999; padding-left:5px }'
 ,'<\/style>'].join('\r');
-->
</script>

其中, 第 5~7 行應該是大家都會需要的部份: 調整行高, 行號靠右, 還有行號和程式之間加一直槓.

這段小程式其實大家也可以用在為某一篇文章附加專用的 CSS.



為了大家閱讀上的方便, 我把原本貼在 Syntax High Light (在 痞客邦部落格 中使用) 後面, 介紹 highlight.js 的部份都搬過來了.

還有麻煩注意一下, 本文中所列的 JS 使用部落格舊編輯模擬器這個 plugin (在擴充管理功能裡安裝) 來修改你的貼文, 並且需要切換到純文字模式, 並勾選 "不要系統換行" 才能正常運作.

highlight.js



網址 https://highlightjs.org/

後來發現這個好像比較易用一些, 預設的調色組合也多一些. 8.6 版共支援 125 種語言及 63 種調色組合(styles)

比起 syntaxhighlighter, 它的缺點是:

  • (內建功能) 不支援自動加行號
  • C 語法有些許錯誤 (據稱 8.7 版已修正)

優點是:

  • 要上色的文字段落可以帶有 <span></span>, 所以可加上一些自訂的變化, 如: 粗體, 加上刪除線, 自訂顏色...
  • 可以 HTML, CSS, Javascript 一起上色, syntaxhighlighter 一次只能套用一種 (有點機車)

下面例子的調色組合 night-owl

<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.1/styles/night-owl.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.1/highlight.min.js" type="text/javascript"></script>
<script><!--hljs.initHighlightingOnLoad();--></script>

<div><pre>
<code class="C++">從這裡開始寫你要上色的程式碼
...
你要上色的程式碼
...
</code>
</pre></div>

用法說明:

2015/10/06 更新


目前版本更新為 8.8.0 版共支援 135 種語言及 65 種調色組合(styles)

2016/10/19 更新


目前版本更新為 9.7.0 版共支援 166 種語言及 77 種調色組合(styles)

發現可以顯示行號的 plugin: https://github.com/wcoder/highlightjs-line-numbers.js/

2020/04/04 更新


目前版本更新為 9.18.1 版共支援 185 種語言及 91 種調色組合(styles)

痞客邦的手機版, 會破壞它的分行, 用 PC 看則沒有這個問題.

2020/04/18 更新


"痞客邦的手機版, 會破壞它的分行" 的部份已經查清楚且修復. 原因是手機版的 CSS 多了一個設定:

.article-content-inner{overflow-wrap:break-word;line-height:1.5}

問題就出在 overflow-wrap:break-word 由於這個屬性會繼承, 所以迼成 .article-content-inner 這個容器以下的許多元素都不產生 overflow 了, 尤其是 <code>, <pre> 這二個需要保持內文原樣的 HTML tag 也都發生了在不應該斷行的地方出現了斷行. 所以只要自訂一個 CSS 把它改回來即可. 不過會產一些副作用: 太長的英文字串如 URL 之類的不會在版面邊界折返, 而是在依符號, 英文單字邊界折返. 這會讓這類 URL 在手機直立版面時, 影響週邊, 使得文章不好閱讀.

.article-content-inner{overflow-wrap:normal}

插入上述 CSS 的辦法. 簡單的:

<p id='myCSS'></p>
<script><!--
document.getElementById("myCSS").outerHTML=[
    '<style type="text/css">'
   ,'.article-content-inner{overflow-wrap:normal}'
   ,'<\/style>'].join('\r');
-->
</script>

複雜的: 請參考我的這一篇貼文 [置頂] 關於 痞客邦 的手機版廣告

2020/05/02 更新


目前版本更新為 10.0.1 版共支援 189 種語言及 91 種調色組合(styles)

    MagicJackTing 發表在 痞客邦 留言(0) 人氣()