網頁內嵌 Code Snippet 2

前篇提到網頁內嵌Python程式碼採用 code-prettify, 方法極為簡單. 但是也看到該程式已經不太更新, 文件裡經過測試的瀏覽器也極為老舊. 另外對於 程式碼為HTML /CSS/XML 等標籤似乎有問題, 還需要稍微改寫.

後來發現還有比較活躍的類似產品: highlight.js. 我們用同樣的Python 碼先試試看他的效果:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>

<script>hljs.highlightAll();</script>

<pre><code class="language-python">

class WorkFolder(Path):

_flavour = _windows_flavour if os.name == 'nt' else _posix_flavour

def __new__(cls, *args):

tmp=super(WorkFolder, cls).__new__(cls, *args)

return tmp if tmp.is_dir() else None

def __init__(self, *args):

self.classIds = list(classes.keys())

self.remains = [child for child in self.iterdir() if \

(child.is_file() and child.suffix.lower() in ['.png','.jpeg','.jpg'])]

if len(self.remains) > 0:

for c in self.classIds:

os.makedirs(self.joinpath(c), exist_ok=True)

</code></pre>

例如, 我們用上面的碼放於 Google Site 的 <>內嵌 元素 , 結果將得到的樣式.

與 下方用 code-prettify 上方採highlight.js 似乎稍微精準一點區隔出保留字與變數. 不過對我個人而言 highlight.js 很明確表明不會支援每行顯示行號, 是蠻可惜的.