如果花點時間，以"javascript highlight"做關鍵字，可在網路上找到一些這類JavaScript函式庫，其中不乏可供免費使用的，採用前先注意一下所提供的授權方式。另外也注意一下所支援的語法高亮有哪些語言，是否包含了想要的語言。還有注意一下是否還持續維護中。可以的話，也可查一下功能介紹，以前還看過可顯示代碼行號的，不過沒去刻意找這種的。
過去看過人家使用SyntaxHighlighter，感覺效果不錯。自己則是採用highlight.js，主要原因是它的文件寫的清楚，使用也容易，支援的語言也很多。
簡單的使用方法如下：
首先，先稍為解釋一下它的運作與結構。highlight.js除了一個JavaScript代碼檔案，還需要搭配一個CSS檔案，後者就是個樣式表，採用不同樣式表，就可顯示不同風格。簡單的說，使用時需要一個JavaScript檔，一個CSS檔，官網提供了一些不同的選擇供使用者挑選，這裡先說明一下CSS的部分。官網首頁就有個簡單的展示，不過有另一個較詳盡的展示頁，頁面的左欄下半部有個Styles列表，點其中的項目就會看到右欄展示區顯示風格的變化。多試幾種Styles，決定好所要的後，記好它的名稱，例如Atelier Dune Dark，CSS檔案名稱就是atelier-dune-dark.css。
決定好了所要的CSS檔之後，準備去下載頁取得檔案。
下載頁提供了幾種取得檔案的管道：CDN、客製包下載、Node.js安裝，或是源碼下載。
CDN上提供了23種常用語言的highlight.js檔案與各式CSS檔，頁面上有個範例可看。稍下方有個風格目錄的連結，可以看到上述所謂的CSS檔案名稱，若用CDN方式，別忘了在CSS檔案名稱中在".css"前加上".min"。
使用者可自行選擇其中一種管道。自己則是用另類偷懶法，直接用展示頁所用的檔案，這樣就省去下載檔案的功夫了。以下的說明是依這種偷懶法做的，僅供參考，別照抄，實際使用時記得依實際情形修改一下。
有了所要的檔案，再來在HTML中掛上這兩個檔案。範例如下：
<html>
<head>
<meta charset="utf-8">
<title>語法高亮測試</title>
<link type='text/css' rel="stylesheet" href="https://highlightjs.org/static/demo/styles/atelier-dune-dark.css"/>
</head>
<body>
<!-- 這裡放網頁內容 -->
<script src="https://highlightjs.org/static/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>
我把highlight.pack.js放在後面，而不是在<head>裡中，在載入網頁後才載入它，最後才執行hljs.initHighlightingOnLoad();，執行語法高度的工作。
上述範例還沒放網頁內容，如果要把一段Python代碼被在裡面，並使用語法高亮，作法是把代碼包夾在<pre><code>之中，如：
<pre>
<code>
代碼
</code>
</pre>
可以指定code的class為"python"，表示是Python語法，如：
<p>以下是從Python官網首頁抄過來的代碼。</p>
<pre>
<code class="python">
def fib(n):
a, b = 0, 1
while a < n:
print(a, end=' ')
a, b = b, a+b
print()
fib(1000)
</code>
</pre>
若不指定class，就自動偵測。
語言的class可查看說明中的Supported Languages。
目前使用起來也並非萬無一失，尤其是HTML代碼，像上面最後例子的呈現就不是很理想。
完整的使用請參考官方文件：How to use highlight.js。
最後把上述範例整合一下，再加上幾個其它語言的代碼（大多曾在以前的文章出現過），重新列示如下：
<html>
<head>
<meta charset="utf-8">
<title>語法高亮測試</title>
<link type='text/css' rel="stylesheet" href="https://highlightjs.org/static/demo/styles/atelier-dune-dark.css"/>
</head>
<body>
<p>以下是從Python官網首頁抄過來的代碼。</p>
<pre>
<code class="python">
def fib(n):
a, b = 0, 1
while a < n:
print(a, end=' ')
a, b = b, a+b
print()
fib(1000)
</code>
</pre>
<p>JavaScript</p>
<pre><code class="javascript">
<div id="chart"></div>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
</code></pre>
<p>HTML</p>
<pre><code class="html">
<link href="/path/to/c3.css" rel="stylesheet" type="text/css">
<script src="/path/to/d3.v3.min.js" charset="utf-8"></script>
<script src="/path/to/c3.min.js"></script>
</code></pre>
<p>Shell</p>
<pre><code class="shell">
$ sudo apt install libreoffice-math
</code></pre>
<p>自動偵測</p>
<pre><code>
demo_env\bin\activate.bat
</code></pre>
<p>DOS</p>
<pre><code class="dos">
demo_env\Scripts\deactivate.bat
</code></pre>
<p>Apache設置檔</p>
<pre><code class="apache">
export LANG='zh_TW.UTF-8'
export LC_ALL='zh_TW.UTF-8'
</code></pre>
<p>無高亮</p>
<pre><code class="nohighlight">
export LANG='zh_TW.UTF-8'
export LC_ALL='zh_TW.UTF-8'
</code></pre>
<script src="https://highlightjs.org/static/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>以上都是HTML的語法高亮結果，這裡主要目的是要呈現在HTML中的作法，故其他語言的高亮結果就不再展示，因在以前的文章大多出現過後，而且在官網上的展示頁也都看得到。
update: 2020-6-14
沒有留言:
張貼留言