---
tags: 實用工具
title: 如何於 vscode 自製 Syntax Highlight
---
###### tags: `實用工具`
###### 撰寫日期：2021/04/09
###### 作者：Lycoris

# 如何於 VSCode 自製語法突顯（Syntax Highlight）
{%hackmd BJrTq20hE %}

[TOC]

## 一、前言與基本概念
**語法突顯（Syntax Highlight）** 能將程式碼上色，一眼就能看出關鍵字、眼睛也比較舒服。

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

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

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

## 三、詳細流程

### 1. 撰寫語法規則檔
#### → 說明
- 最重要的步驟。一般使用==正規表達式==來篩選出想標記的文字
- 選出欲標記文字後，配上系統既有的[上色種類（Standard Theme）](https://www.apeth.com/nonblog/stories/textmatebundle.html)即可將文字上色

#### → 作法
- 參考[此篇](https://macromates.com/manual/en/language_grammars)建立語法規則檔，可使用 `json` 語法撰寫
- 用 `json` 寫完後，再用 vscode 套件轉成 `tmLanguage` 檔案即可
- 此處解釋兩種匹配規則，基本很夠用了：
- 單純匹配
- `"match"`：正規表達式的規則。範例中捕捉了阿拉伯數字
- `"name"`：上色種類（Standard Theme）

        {
            "name": "constant.numeric.mynumber",
            "match": "[0-9]+"
        }

- 分段匹配
- `"match"`：正規表達式的規則，並使用括號進行分類
- `"captures"`：針對上面 `"match"` 的分類進行上色。例如下方程式碼捕捉了 "**Starburst stream**" ，但只對 "**bust**"上色。效果如："Star==burst== 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 插件開發自定義語言](https://geek-docs.com/vscode/vscode-plugin-dev/the-custom-language-vscode-plugin-development.html)
- 使用 `Node.js` 的套件 `Yeoman` 幫你把規則檔轉換
- 先安裝 `Node.js`，然後再使用 `npm` 安裝 `Yeoman` 和 `generator-code`。[參考此處](https://code.visualstudio.com/api/get-started/your-first-extension)
- 注意，`Node.js` 的版本要夠新才能安裝 `Yeoman`
- 啟動 `Yeoman`，選擇 “New Language Support” ，回答完問題即可
- 完成後會得到一個資料夾

### 3. 貼上至 VSCode 的擴充功能資料夾，完成
#### → 說明
Linux 作業系統環境下，擴充功能資料夾位於 `.vscode/extensions` 中

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

#### → 成品範例
（驚嘆號的顏色是自己另外加的）


## 四、參考資料
- 開發流程
- [在 Visual Studio Code 為新語言增加語法標示 (Syntax Highlighting)](http://meebox.blogspot.com/2016/09/visual-studio-code-syntax-highlighting.html)
- [VSCode 插件開發自定義語言](https://geek-docs.com/vscode/vscode-plugin-dev/the-custom-language-vscode-plugin-development.html)
- [VSCode 官方文件](https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide)
- [VSCode 規則檔轉擴充檔程式：Yeoman](https://code.visualstudio.com/api/get-started/your-first-extension)
- 撰寫規則與上色
- [TextMate Language Grammars](https://macromates.com/manual/en/language_grammars)
- [Writing a TextMate Grammar: Some Lessons Learned](https://www.apeth.com/nonblog/stories/textmatebundle.html)
- 正規表達式
- [正規表示式 Regular Expression](https://atedev.wordpress.com/2007/11/23/正規表示式-regular-expression/)
- [正規表示式練習：RegEx Testing](https://www.regextester.com/)

## 五、附錄：Vim 的上色
- 原理同本篇，只是規則的描述方式略有不同
- 可參考 [Vim 的 SystemVerilog Syntax 設定](https://www.vim.org/scripts/script.php?script_id=1586)
- 安裝：下載檔案解壓縮，照 README 走即可
- 仿照其設定檔，將自定規則置於 `syntax` 下；副檔名設定於 `ftdetect` 下即可