部落格貼上程式碼的方法

簡介

大家好！我是Pawn，這是我的首篇文章，為了要在部落格撰寫文章，首先需要將程式碼貼到部落格，因此在此提供美化程式碼顯示的兩種方法，供日後方便查閱。

• Prettify Demo:

public static void main(){
    helloAlbert();
}

• GithubGist Demo:

一、Prettify:
1.開啟Blogger文章HTML編輯模式：

2.引用Google-code-prettify：include單一檔案即可（run_prettify.js）。
建議將下列語法自動加入網誌，避免誤刪和建立網誌需從新引用的麻煩：
自動加入網誌流程：版面配置>新增小工具>HTML/JavaScript>再將新產生tag從頁欄拖曳至頁面主體>完成。

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

• skin參數設定：官方提供五種預設樣板，也可自行調整CSS。
  

3.匯入run_prettify.js後，即可使用prettify語法來優化您的程式碼顯示:

<pre class="prettyprint lang-java linenums">
//input code:
public static void main(){
    helloAlbert();
}
</pre>

• lang-*：支援多種程式語法。
• linenums：顯示行數，預設為每五筆顯示。
• 下列為自行調整，只顯示每筆行數：{ list-style-type: decimal !important; }。
  

  <script src="https://gitcdn.link/cdn/biinigg/ThirdParty/0669bc939cc2938b3bf7a5fdecbc3fb592311012/google-code-prettify/desert.css"></script>
  /* Specify class=linenums on a pre to get line numbering */
  ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
  li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: decimal !important; }
  /* Alternate shading for lines */
  li.L1,li.L3,li.L5,li.L7,li.L9 { }
  

二、GithubGist:
create public gist後取得Embed this gist in your website，將之貼到HTML編輯器中即可。

<script src="https://gist.github.com/biinigg/e3a29cc1b5e7e88453f5b8c395d1fb40.js"></script>

完成圖：

參考網址

https://amobiz.github.io/2013/05/28/blogger-google-code-prettify-github-gist/