如何在Blogger嵌入程式碼-Google Code Prettify

加入程式碼區塊教學可參考此篇文章
https://eric0806.blogspot.tw/2014/04/blogger-google-code-prettify.html

首先在</head>標籤前加入以下程式碼:

<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;
}
</style>

接著在</body>標籤前加入以下程式碼:

<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>

使用時方式如下:

<pre>
<!--這裡就可以放你的程式碼了-->
</pre>

成果如下:

#include <iostream>
using namespace std;
 
int main() 
{
    cout << "Hello, World!";
    return 0;
}

另外，程式碼內如果含有一些特殊福號，則需要經過轉換
可使用此工具