ZWH ZONE

[套件] highlight.js 讓網站顯示好看的程式碼區塊

zhiwei. huang -

highlight.js 可以為你網站的 程式碼區塊 提供大量的版型，讓你的 技術BLOG 看起來跟有格調，也可以大幅提升文章的可讀性，提供各種語言的版型可供使用，且非常的好套用

官方網站：highlight.js

如何套用？

只需將 highlight.js 提供的 cdn ，直接加入網站的 head ：

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

在執行 hljs.initHighlightingOnLoad(); 的 function 就可以了：

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

你也可以到 highlight.js 的下載 頁面，進行客製化

選擇版型：

highlight.js 有提供很多種版型可供我們使用，可以查看 heighlight.js demo，來挑選喜歡的版型

接著只要更改 css 的 cdn ， 後面的 default ， 改成對應的名稱就可以了，如下：

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github-gist.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

版型的名稱一律 小寫 ， 空格則用 - 來取代

Facebook 功能：