2016年1月10日 星期日

把 Blogger 加上 code hightlight

今天我終於把網誌加上一直很想要的程式碼上色功能。
我用的是 highlight.js 
現在科技進步,居然還提供 CDN,連找地方放 js 的時間都省了。

那如何在 blogger 上面加入呢?

首先要修改 blogger 範本,在 區段中加入以下三行:
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/default.min.css" rel="stylesheet"></link>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

其中可以選擇的主題在他們的 github 目錄中。
例如我想要套用 rainbow 這個主題,就將 css link 改為

<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/rainbow.min.css" rel="stylesheet"></link>

那如何使用呢?

只要用下面的語法包起來就可以了

<pre><code class="語言">
// 你的程式碼 
</code></pre>

可以使用的語言請見這個 github 目錄




沒有留言:

張貼留言