2017/4/1

使用hightlight.js 幫網誌產生程式碼高亮效果

範例


void hello_world(){
    printf("Hello world!");
    return(0);
}
設定步驟:
進入blogger設定/主題/自訂html
當中嵌入以下程式碼:



<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/xxx.min.css" rel="stylesheet"></link>  
//將xxx改為想要的主題名稱
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>  
//import hightlight.js
<script>hljs.initHighlightingOnLoad();</script>  
//launch hightlight.js


說明:
hljs.initHighlightingOnLoad()會在網頁onload事件觸發時,將網頁中的程式碼區塊
...
找出來自動上色
因此我們只要將想呈現的程式碼使用這樣的格式<pre><code>...</code></pre> 圍住就行了

沒有留言:

張貼留言