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

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

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 功能: