在Blogger為程式碼上色

其實是為了筆記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'>...

手機板就會顯示此樣式囉！

---

參考資源：

• 版面配置的網頁元素標記
• 如何在網頁blogger中插入程式碼