2021年9月7日 星期二

[ 學習筆記 ][ 電腦設定 ] 在 Blogger 裡面放入程式碼區塊的簡單方法 A Simple Way to Insert Code Chunk in Blogger


學習如何使用 JavaScript Code Prettifier 讓程式碼區塊嵌入網誌文章內的筆記：

〇、簡介：

Code Prettifier 是一個可嵌入的腳本，能使在 HTML 文件裡頭的程式碼內容較美觀。支援多種語言，能在 HTML 頁面上運作，有簡單的 API 方便操作。點選上方連結可以連至 Code Prettifier 的 GitHub，內有詳細說明。如果只是要能夠在網誌頁面呈現程式碼區塊，底下內容就已足夠使用。

一、設定：

1. 至後台「主題」-> 「自訂」->「編輯 HTML」

2. 在 <body> 之前貼上以下程式碼：

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

在上列程式碼中 ?skin=sunburst 為程式碼區塊的顯示風格設定，還有其他幾種樣板提供選擇，請見此處。需注意，skin 後方樣版名稱的英文需改為小寫並去除連結號才能正常運作，否則會抓不到樣板而改以預設的白底灰條形式出現。例如：用 Sons-Of-Obsidian 樣板，需寫為 ?skin=sonsofobsidian。

二、呈現：

1. 將欲以程式區塊顯示在網誌的程式碼，在網誌後台以 HTML 編輯模式，嵌入於下列程式中 ... 的位置。 

<pre class="prettyprint">...</pre>
 
2. 若是想要在程式碼前方顯示行數，則可以使用：

<pre class="prettyprint linenums">...</pre>
 
在許多顯示風格中預設值是每五行秀出一次程式碼行數。所以若是想在每一行都顯示程式碼的行數。則需要在剛剛第一部分於 <body> 下方加入的程式碼下方，再加上下列這一串程式，即可顯示每行程式的行數。
<script>
li.L0, li.L1, li.L2, li.L3,li.L5, li.L6, li.L7, li.L8 {
  list-style-type: decimal !important;
}
</script>
By

沒有留言:

張貼留言

有什麼話想告訴我嗎？歡迎在此留言喔！

訂閱： 張貼留言 (Atom)