[展示] 在 Blog / Blogger 設定程式碼上色與 highlight.js 配色預覽展示

8月 03, 2023

壹、需求與情境

　　最近正在建立 Blogger 作為筆記資源存放位置，然作為一名工程師，Blogger 的預設 css 風格缺乏了對展示程式碼的必要設定。我期待程式碼區塊能自動進行配色，讓撰文時能專注於內容而非格式。
　　要達成這個目的，其中最簡單的手段是使用前人已經設定的既有配色風格，而 highlight.js 便是集合各種程式碼風格於一身的專案。
　　在本文中，您可以選擇自己喜歡的 highlight.js 風格，並藉由在自己網站引用相關檔案的 CDN 路徑來為自己網站的程式碼上色。

貳、選擇 highlight.js 風格

選擇一個喜愛的風格。如果覺得不知從何選起，可以使用過濾關鍵字來留下。例如：

「dark」、「light」等明暗風格
「sublime」、「atom」等編輯器風格
「stackoverflow」等網頁服務風格

Select a Theme: Filter Keyword:


class PythonClass:
    def funct(int a, int b):
        return a + b
    
if __name__ == "__main__":
    f = PythonClass()
    print(f.funct(15, 25))


public class JavaClass {
    public static int funct(int a, int b) {
        return a + b;
    }
    public static void main(String[] args) {
        System.out.println(funct(15, 25));
    }
}


type GoClass struct{}
func (p *GoClass) funct(a, b int) int {
    return a + b
}
func main() {
    f := GoClass{}
    fmt.Println(f.funct(15, 25))
}


class JavaScriptClass {
  funct(a, b) {
    return a + b;
  }
}

if (name === "main") {
  const f = new JavaScriptClass();
  console.log(f.funct(15, 25));
}


class PHPClass {
    public function funct(int $a, int $b) {
        return $a + $b;
    }
    public static function main() {
        $php_class = new PHPClass();
        echo $php_class->funct(15, 25);
    }
}
PHPClass::main();


#!/bin/bash
function funct() {
  local a=$1
  local b=$2
  echo $(($a + $b))
}

if [[ "$0" == "${BASH_SOURCE[0]}" ]]; then
  funct 15 25
fi

參、將風格套用在自己的 Blog / Blogger 上(以CDN實作)

複製以下程式碼 (已自動生成你選擇的風格所需之程式碼)
將程式碼貼在 Blogger 的主題 HTML 中
圖片備份

圖片備份
建立一份貼文測試
程式碼必須被包在「pre」、「code」Tag 中，可以選擇自動檢查或手動指定程式碼語言，如下圖 (請取代中括號)：
支援語言列表如連結
```
<pre>
  <code>
    [你的程式碼...]
  </code>
</pre>
```
```
<pre>
  <code class="language-[指定語言]">
    [你的程式碼...]
  </code>
</pre>
```
完成

搜尋此網誌

科技部屋 Tech Chamber

[展示] 在 Blog / Blogger 設定程式碼上色與 highlight.js 配色預覽展示

壹、需求與情境

貳、選擇 highlight.js 風格

參、將風格套用在自己的 Blog / Blogger 上(以CDN實作)

肆、參考資料

留言

張貼留言

這個網誌中的熱門文章

[教學] 手把手申報美國聯邦個人所得稅(file a tax return)

[Lab] Postman X Trello RESTful API Startup Lab