【Google Code Prettify】取代 Syntaxhighlighter 程式碼區塊

之前一直使用Syntaxhighlighter做網誌的程式碼區塊上色

不知道壞掉多久了

咕狗了一下發現新的Google Code Prettify可以用，紀錄一下



需要更深入的需求請前往 Google Code Prettify


在Blogger版面設定加上小工具HTML/JavaScript

輸入以下代碼

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

可以選擇skin (網址)
skin用法為在小工具代碼run_prettify.js後面加上?skin=skin名稱 (小寫)例如

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian"></script>

撰寫文章時程式碼使用HTML加上區塊

<pre class="prettyprint">程式碼</pre>

要加上行號則使用

<pre class="prettyprint linenums:40">程式碼</pre> (:40是指從行號40開始，若要從1開始可以不用加:1)

例如使用linenums:10︰

    private Button btnExit,btnOption,btnStart;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

則行號從第10行開始

預設行號只顯示5.10.15...等5的倍數，如果要逐行顯示需要在小工具代碼上面加上

<style>
li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
 list-style-type: decimal !important
}
</style>.js"></script>

這樣就會逐行顯示行號



程式區塊會隨程式碼長度調整，如果太長的話會超出網誌閱讀範圍

可以在區塊內加上scroll bar 在小工具的<style></style>之間加入

.prettyprint {
  overflow: auto
}

另外區塊有<>&等符號的話需要轉換成xml，可以用轉換網站 (網址)




給End朋友的懶人包
skin部份依需求自行修改

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian"></script>
<style>
li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
 list-style-type: decimal !important
}
.prettyprint {
  overflow: auto
}
</style>