blogger使用highlight上色程式碼並加入強調框線及自動換行

注意！若你的blogger樣式有做過大量調整，請備份後再繼續作業！

引入highlight.js

這篇文章發出時最新版本是9.12.0，請至hightlight.js官方自行將數字改成最新版本
接著可以到highlight CSS樣式選擇表選擇喜歡的呈現方式，我是採用vs2015

1. 到blogger後台 > 主題 > 編輯html
2. 搜尋/body>
3. 在前方引入highlight.js，框起來處記得修改成最新版本&喜歡的樣式

<!-- highlight -->
<link href='///cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/vs2015.min.css' rel='stylesheet' type='text/css'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js' type='text/javascript'/>

<script>hljs.initHighlightingOnLoad();</script>
<!-- highlight -->

4. 存檔

使用方法

寫完文章後，切換至檢視html，在程式碼前後以下方函式包住就可以嘍！

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

由於我寫文章時都是用stack edit + markdown 來撰寫
可以參考我的另一篇文章 >> 使用stack edit 撰寫文章並發佈至blogger

就不必記上面的語法嘍！

新增程式碼強調外框及單行過長時自動換行

1. 搜尋/head>
2. 在前方加入css設定

<!--for highlight-->
<style type='text/css'>
/*強調外框*/
.pre-highborder{
 border: 1px solid #ffff00;
 padding: 3px 3px 3px 0;
}
/*單行過長自動換行*/
pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

</style>
<!--for highlight-->

1. 若想要調整框框的顏色樣式，可在上方的.pre-highborder調整
2. 存檔

強調外框使用方法

<pre><code="javascript">
function example(){
    <span class="pre-highborder">//要框起來的程式碼</span>
}
</code></pre>

程式碼自動換行說明

大部份情況下其實不太會寫到換行啦
但像是powerShell或terminal的指令教學，就會碰上了
可以至我的另一篇教學文章 >>Exchange郵件聯絡人 大量匯入 參閱呈現效果！