Prism - Customize Code Highlighter

Kerwin 收錄於類別 CODE

2020-05-17 2020-05-17 約 306 字預計閱讀 1 分鐘

客製化程式碼高亮 - Customize Code Highlighter

前言

之前用的 Rough 有點不習慣，所以找到 Prism ，一個客製化的程式碼高亮的應用。

勾選完需求後，就可以在最下方下載 js 及 css 檔案。

Prism 提供了一些插件輔助，比如顯示程式碼行數、程式碼語言別、單行高亮…等等。

以下提供一些我使用的插件。

在要高亮的內容要加入 line-numbers 的 class類別，如下 :

1
2
3
<article class="post-content line-numbers" itemprop="articleBody">
  {% raw %}{{ content }}{% endraw %}
</article>

沒重點，同時勾選 Copy to Clipboard Button 及 Toolbar 後引入 js 檔即可。

勾選 Treeview 後引入 js 檔，高亮語言選擇 treeview 即可。

1
2
3
{% raw %}{% highlight treeview %}{% endraw %}
    ...程式碼...
{% raw %}{% endhighlight %}{% endraw %}