Google Blogger 設定程式代碼顯示樣式[Google Prettify]

為了讓Blogger上的程式代碼增加可讀性, 可以使用[Google Prettify]的Javascript來格式化代碼。

- 支援多種程式語言
- 在Blogger上設定容易

Google Prettify設定說明如下, 詳細資料可以參考 Google Prettify。

STEP-01  利用小工具[設定 HTML/JavaScript]加入 Goole Prettify Javascript
- 標題: 輸入小工具名稱(依個人喜好)
- 內容: 貼上Javascript設定
- 顯示這個小工具: 一樣要打開, 不然不會引用(有些部落格樣版不會有這個選項)

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst"></script>

skin可以參考skin gallery更換

STEP-02 預設程式代碼只會每5行顯示行號, 若要每行都顯示, 利用小工具[設定 HTML/JavaScript]加入下面CSS設定

<style>
  .prettyprint ol.linenums > li {
    list-style-type: decimal;
    padding-left:10px;
  }
</style>

STEP-03 在Blogger要顯示的代碼前後用<pre class="prettyprint linenums">...</pre>包起來

<pre class="prettyprint linenums">
void Main()
{
  string a = "123456";
  string b = a.Substring(0, 3);
  Console.WriteLine(b);
}
</pre>

STEP-04 就完成了

void Main()
{
  string a = "123456";
  string b = a.Substring(0, 3);
  Console.WriteLine(b);
}

參考網址:
https://github.com/googlearchive/code-prettify
https://tsungsquare.blogspot.com/2020/01/blogger-bloggergoogle-code-prettify.html
https://iamernie8199.blogspot.com/2018/09/blogger-google-code-prettifyblogger.html
https://www.minwt.com/webdesign-dev/html/23259.html