コードエディターのシンタックスハイライトの話

1. コードエディター のシンタックスハイライトの話 @Arata
2. 　コードエディターのシンタックスハイライトの話　Twitter: @arata_nvm 2024/05/11 #until_lt0x04 意味(semantics)に基づいた機能 • 入力補完 • 定義・参照へのジャンプ • ドキュメントの表示 構文(syntax)に基づいた機能 • シンタックスハイライト • 括弧の対応づけ • オートインデント コードエディターが持つ2つの機能 2 注: 機能の分類はエディターによって異なる LSP(Language Server Protocol)で 標準化されている コードエディターごとの仕様に従って 実装する必要がある コードエディターの個性が現れがち 機能① 機能②
3. 　コードエディターのシンタックスハイライトの話　Twitter: @arata_nvm 2024/05/11 #until_lt0x04 • Atomの開発陣が作った新しいエディター • Rust製 Zed 3
4. 　コードエディターのシンタックスハイライトの話　Twitter: @arata_nvm 2024/05/11 #until_lt0x04 言語の定義には右図のような定義ファイルが必要 • highlights.scm ◦ シンタックスハイライト用の定義 • brackets.scm ◦ 括弧の定義 • indents.scm ◦ インデントを上げ下げする場所の定義 Zedにおける言語の定義ファイル 4
5. 　コードエディターのシンタックスハイライトの話　Twitter: @arata_nvm 2024/05/11 #until_lt0x04 例: Markdownのhighlights.scm 5
6. 　コードエディターのシンタックスハイライトの話　Twitter: @arata_nvm 2024/05/11 #until_lt0x04 • パーサーを作るためのライブラリ • JavaScriptで構文を定義→コンパイルしてパーサーを作る • テキストの差分だけを見てパースし直す機能がある Tree-sitter 6
7. 　コードエディターのシンタックスハイライトの話　Twitter: @arata_nvm 2024/05/11 #until_lt0x04 例: Tree-sitterによるMarkdownのパース 7 パース ソースコード 具象構文木 ① ② ① ②
8. 　コードエディターのシンタックスハイライトの話　Twitter: @arata_nvm 2024/05/11 #until_lt0x04 構文木から特定のパターンのノードを検索する機能 例: atx_headingノードの中の、heading_contentノードに @heading.contentという名前をつける Tree-sitterにおけるクエリ 8
9. 　コードエディターのシンタックスハイライトの話　Twitter: @arata_nvm 2024/05/11 #until_lt0x04 Tree-sitterにおけるクエリ 9 パース ソースコード 具象構文木
10. 　コードエディターのシンタックスハイライトの話　Twitter: @arata_nvm 2024/05/11 #until_lt0x04 例: Markdownのhighlights.scm 10
11. 　コードエディターのシンタックスハイライトの話　Twitter: @arata_nvm 2024/05/11 #until_lt0x04 シンタックスハイライトの観点に絞ると: • 正規表現よりも確実・高速にハイライトできる • より自由度の高い設定ができる Tree-sitterを使うと何が嬉しいのか 11
12. 　コードエディターのシンタックスハイライトの話　Twitter: @arata_nvm 2024/05/11 #until_lt0x04 • LSPのアウトライン機能を使わず、Tree-sitterのクエリ を使って独自実装している ◦ アウトライン機能: クラスやフィールド、見出しの一覧機能 ◦ 統一感をもたせることが目的らしい • ソースコード中に埋め込まれた別言語のソースコードに シンタックスハイライトを効かせる機能がある ◦ e.g. HTMLの<script>内に書かれたJavaScript Zedのおもしろいところ 12
13. 　コードエディターのシンタックスハイライトの話　Twitter: @arata_nvm 2024/05/11 #until_lt0x04 https://zed.dev/ おわりに 13