[Blogger]在文章內加入程式碼框 — Google Code Prettify

網路上類似的教學很多，看了一輪之後發現最喜歡這個~

程式碼來源 http://eric0806.blogspot.tw/2014/04/blogger-google-code-prettify.html

Google Code Prettify 的 source code :  https://github.com/google/code-prettify


Google Code Prettify是一個由Google推出的工具，主要功能是美化你的程式碼，我覺得在應用上並不困難，成果也很不錯~

首先到 範本 > 編輯HTML

接著在</body>之前加入

<!--Blogger內加入程式碼高亮-->
 <script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&amp;lang=basic&amp;lang=css&amp;lang=sql'/>
 <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'/>
 <script type='text/javascript'>

    $(&quot;pre&quot;).each(function(){
        $(this).addClass(&#39;prettyprint&#39;).addClass(&#39;linenums&#39;);
    });

 </script>
<!--Blogger內加入程式碼高亮-->

然後再</head>之前加入style設定

<style type='text/css'>
/*程式碼高亮設定*/
/*main box*/
.pre-highborder{
 border: 1px solid #ff0000;
 padding: 3px 3px 3px 0;
}

pre.prettyprint, code.prettyprint {
 border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 padding: 5px;
 background-color: #eee !important;
 box-shadow: 0 0 5px #999;
 -moz-box-shadow: 0 0 5px #999;
 -webkit-box-shadow: 0 0 5px #999;
}

/*font*/
pre span, code span {
 font-family: &#39;monospace&#39;, &#39;Courier New&#39;, &#39;Microsoft JhengHei&#39;, sans-serif !important;
 font-size: 12px !important;
}

/*each line*/
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
 margin: 0 !important;
 padding: 2px 0 2px 4px !important;
 list-style-type:decimal !important;
 border-left: 1px solid #999;
}

/*even line*/
li.L1, li.L3, li.L5, li.L7, li.L9 {
 background-color: #f6f6f6 !important;
}

/*odd line*/
li.L0, li.L2, li.L4, li.L6, li.L8 {
 background-color: #FFF !important;
}

/*line-number background color*/
ol.linenums {
 background-color: #eee;
 margin-left: 10px;
 word-wrap: break-word;
}
</style>

這樣就完成設定了，接下來只要在編輯文章的時候切換到HTML，加入

<pre>
//要放在文章裡的程式碼
</pre>

就可以了，另外如果需要加上像是上面那種紅色框框可以用class="pre-highborder"，例如

<span class="pre-highborder">//要放在文章裡的程式碼</span>

顏色和粗細以及整體的樣式都能自己調整喔!

補充：我在ol.linenums的地方加上了white-space:pre-wrap;讓它可以自動換行