其實是為了筆記XD，看了數種plugin後最喜歡prism的theme~
一般來說，程式若要寫在blog上，用html標記的話是放在pre>code內
<pre><code>這裡</code></pre>
但如果未上色的話看起來會較不容易閱讀。如下：
setTimeout(function(){
$('#areaMenu').parents('nav.nav').removeClass('active');
}, 1500);
$('#areaMenu').on('click', function(e){
e.preventDefault();
if($(this).parents('nav.nav').hasClass('active')) {
$(this).parents('nav.nav').removeClass('active');
} else {
$(this).parents('nav.nav').addClass('active');
}
});
如果highlight code就會覺得友善多了，而且很多人都有寫，所以找網路資源就好！
setTimeout(function(){
$('#areaMenu').parents('nav.nav').removeClass('active');
}, 1500);
$('#areaMenu').on('click', function(e){
e.preventDefault();
if($(this).parents('nav.nav').hasClass('active')) {
$(this).parents('nav.nav').removeClass('active');
} else {
$(this).parents('nav.nav').addClass('active');
}
});
本次使用prism.js示範。
先到後台，選版面配置
到footer的位置新增HTML/JavaScript
將prism在cdn的位置填入
<!-- 主要的樣式 -->
<link href="//cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism.min.css" rel="stylesheet" type="text/css" />
<!-- 顯示行數的樣式 -->
<link href="//cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet" type="text/css" />
<!-- 上色js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js"></script>
<!-- 顯示行數的js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/plugins/line-numbers/prism-line-numbers.min.js"></script>
然後基本上就會高亮程式碼了！
<pre class="language-html"><code><!-- 這裡 --></code></pre>
如果發現mobile版的時候HTML/JavaScript沒有被插入，請在部落格右鍵，看網頁原始碼找被插入的檔案。在本篇，blogger給他的id="HTML1"
到範本中，選擇「編輯HTML」。
可以依照他的工具跳到HTML1或者我比較喜歡用ctrl+F快速跳轉。
在該widget下增加「mobile='yes'」的屬性
<b:widget id='HTML1' locked='false' mobile='yes' title='code style plugin' type='HTML'>...
手機板就會顯示此樣式囉！
參考資源：
