tags: 實用工具

撰寫日期：2021/04/09

作者：Lycoris

如何於 VSCode 自製語法突顯（Syntax Highlight）

• 如何於 VSCode 自製語法突顯（Syntax Highlight）
  • 一、前言與基本概念
  • 二、簡易流程
  • 三、詳細流程
    • 1. 撰寫語法規則檔
    • 2. 包裝成 VSCode 能懂的擴充功能
    • 3. 貼上至 VSCode 的擴充功能資料夾，完成
  • 四、參考資料
  • 五、附錄：Vim 的上色

一、前言與基本概念

語法突顯（Syntax Highlight） 能將程式碼上色，一眼就能看出關鍵字、眼睛也比較舒服。

VSCode 上已經有需多前人貢獻的相關擴充功能，但如果是自己打的紀錄報告或公司內部特有的 Log 檔案風格，就要自己想辦法。這篇就是做個步驟備忘，首先上個成品範例：Starburst！！！

簡單來說，語法突顯的本質是將特定字元進行標記（Tokenization），然後再將被標記的文字進行上色，就形成漂亮、有各式顏色的程式碼了。

二、簡易流程

1. 建立語法規則檔（將你要的字進行標記，然後分類上色）
2. 包裝成 vscode 能懂的擴充功能
3. 貼上至 vscode 的擴充功能資料夾，完成

三、詳細流程

1. 撰寫語法規則檔

→ 說明

• 最重要的步驟。一般使用正規表達式來篩選出想標記的文字
• 選出欲標記文字後，配上系統既有的上色種類（Standard Theme）即可將文字上色

→ 作法

• 參考此篇建立語法規則檔，可使用 json 語法撰寫
  • 用 json 寫完後，再用 vscode 套件轉成 tmLanguage 檔案即可
• 此處解釋兩種匹配規則，基本很夠用了：
  • 單純匹配
    • "match"：正規表達式的規則。範例中捕捉了阿拉伯數字
    • "name"：上色種類（Standard Theme）
    ​​​​​​​​{
    ​​​​​​​​    "name": "constant.numeric.mynumber",
    ​​​​​​​​    "match": "[0-9]+"
    ​​​​​​​​}
    

  • 分段匹配
    • "match"：正規表達式的規則，並使用括號進行分類
    • "captures"：針對上面 "match" 的分類進行上色。例如下方程式碼捕捉了 "Starburst stream" ，但只對 "bust"上色。效果如："Starburst stream"
    ​​​​​​​​{
    ​​​​​​​​    "match": "(\\bStar)(burst)(\\sstream\\b)", 
    ​​​​​​​​    "captures": {
    ​​​​​​​​        "2": {
    ​​​​​​​​            "name": "keyword.mykeyword"
    ​​​​​​​​        }
    ​​​​​​​​    }
    ​​​​​​​​}
    

→ 實際範例

• 範例如下，整合了上述兩種匹配規則：
  • "scopeName"：單純的名稱
  • "fileTypes"：欲上色的副檔名，此處以 ".mylog" 為例
  ​​​​{  
  ​​​​    "scopeName": "text.mylog",
  ​​​​    "fileTypes": "mylog",
  ​​​​    "patterns": [ 
  ​​​​        {  
  ​​​​            "name": "constant.numeric.mynumber",
  ​​​​            "match": "[0-9]+"
  ​​​​        },
  ​​​​        {
  ​​​​            "match": "(\\bStar)(burst)(\\sstream\\b)", 
  ​​​​            "captures": {
  ​​​​                "2": {
  ​​​​                    "name": "keyword.mykeyword"
  ​​​​                }
  ​​​​            }
  ​​​​        }
  ​​​​}
  

2. 包裝成 VSCode 能懂的擴充功能

→ 說明

規則檔寫好了，接下來就是要讓 VSCode 看得懂

→ 作法

• 詳細可參考：VSCode 插件開發自定義語言
• 使用 Node.js 的套件 Yeoman 幫你把規則檔轉換
  • 先安裝 Node.js，然後再使用 npm 安裝 Yeoman 和 generator-code。參考此處
  • 注意，Node.js 的版本要夠新才能安裝 Yeoman
  • 啟動 Yeoman，選擇 “New Language Support” ，回答完問題即可
  • 完成後會得到一個資料夾

3. 貼上至 VSCode 的擴充功能資料夾，完成

→ 說明

Linux 作業系統環境下，擴充功能資料夾位於 .vscode/extensions 中

→ 作法

直接將 Yeoman 包好的資料夾丟進 .vscode/extensions 中即可。記得重開 VSCode 。

→ 成品範例

（驚嘆號的顏色是自己另外加的）

四、參考資料

• 開發流程
  • 在 Visual Studio Code 為新語言增加語法標示 (Syntax Highlighting)
  • VSCode 插件開發自定義語言
  • VSCode 官方文件
  • VSCode 規則檔轉擴充檔程式：Yeoman
• 撰寫規則與上色
  • TextMate Language Grammars
  • Writing a TextMate Grammar: Some Lessons Learned
• 正規表達式
  • 正規表示式 Regular Expression
  • 正規表示式練習：RegEx Testing

五、附錄：Vim 的上色

• 原理同本篇，只是規則的描述方式略有不同
• 可參考 Vim 的 SystemVerilog Syntax 設定
  • 安裝：下載檔案解壓縮，照 README 走即可
  • 仿照其設定檔，將自定規則置於 syntax 下；副檔名設定於 ftdetect 下即可