Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
コードエディターのシンタックスハイライトの話
Search
Arata
May 12, 2024
0
110
コードエディターのシンタックスハイライトの話
Arata
May 12, 2024
Tweet
Share
More Decks by Arata
See All by Arata
LLVMのコード自動生成機構におけるコード記述を支援するツールの作成
arata_nvm
0
46
TableGenの言語サーバーをつくる
arata_nvm
0
530
pwn入門 / introduction to pwn
arata_nvm
1
2.1k
TableGenと和解せよ / make peace with TableGen
arata_nvm
0
99
sudo-rsのテストの話 / story of sudo-rs testing
arata_nvm
1
160
ソースコードリーディングはいいぞ / source code reading is good
arata_nvm
0
59
ネットワーク委員会活動報告 / network committee activity report
arata_nvm
0
18
Twitter専用のPCを作る / create a dedicated Twitter PC
arata_nvm
0
49
日中の電子決済システムの比較と分析 / comparison and analysis of Japanese and Chinese electronic payment systems
arata_nvm
0
88
Featured
See All Featured
Unsuck your backbone
ammeep
670
57k
Making Projects Easy
brettharned
116
6.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
13
1.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.6k
Building Flexible Design Systems
yeseniaperezcruz
329
38k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.1k
KATA
mclloyd
29
14k
RailsConf 2023
tenderlove
30
1.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
For a Future-Friendly Web
brad_frost
176
9.7k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Transcript
コードエディター のシンタックスハイライトの話 @Arata
コードエディターのシンタックスハイライトの話 Twitter: @arata_nvm 2024/05/11 #until_lt0x04 意味(semantics)に基づいた機能 • 入力補完 • 定義・参照へのジャンプ •
ドキュメントの表示 構文(syntax)に基づいた機能 • シンタックスハイライト • 括弧の対応づけ • オートインデント コードエディターが持つ2つの機能 2 注: 機能の分類はエディターによって異なる LSP(Language Server Protocol)で 標準化されている コードエディターごとの仕様に従って 実装する必要がある コードエディターの個性が現れがち 機能① 機能②
コードエディターのシンタックスハイライトの話 Twitter: @arata_nvm 2024/05/11 #until_lt0x04 • Atomの開発陣が作った新しいエディター • Rust製 Zed 3
コードエディターのシンタックスハイライトの話 Twitter: @arata_nvm 2024/05/11 #until_lt0x04 言語の定義には右図のような定義ファイルが必要 • highlights.scm ◦ シンタックスハイライト用の定義 •
brackets.scm ◦ 括弧の定義 • indents.scm ◦ インデントを上げ下げする場所の定義 Zedにおける言語の定義ファイル 4
コードエディターのシンタックスハイライトの話 Twitter: @arata_nvm 2024/05/11 #until_lt0x04 例: Markdownのhighlights.scm 5
コードエディターのシンタックスハイライトの話 Twitter: @arata_nvm 2024/05/11 #until_lt0x04 • パーサーを作るためのライブラリ • JavaScriptで構文を定義→コンパイルしてパーサーを作る • テキストの差分だけを見てパースし直す機能がある
Tree-sitter 6
コードエディターのシンタックスハイライトの話 Twitter: @arata_nvm 2024/05/11 #until_lt0x04 例: Tree-sitterによるMarkdownのパース 7 パース ソースコード 具象構文木
① ② ① ②
コードエディターのシンタックスハイライトの話 Twitter: @arata_nvm 2024/05/11 #until_lt0x04 構文木から特定のパターンのノードを検索する機能 例: atx_headingノードの中の、heading_contentノードに @heading.contentという名前をつける Tree-sitterにおけるクエリ 8
コードエディターのシンタックスハイライトの話 Twitter: @arata_nvm 2024/05/11 #until_lt0x04 Tree-sitterにおけるクエリ 9 パース ソースコード 具象構文木
コードエディターのシンタックスハイライトの話 Twitter: @arata_nvm 2024/05/11 #until_lt0x04 例: Markdownのhighlights.scm 10
コードエディターのシンタックスハイライトの話 Twitter: @arata_nvm 2024/05/11 #until_lt0x04 シンタックスハイライトの観点に絞ると: • 正規表現よりも確実・高速にハイライトできる • より自由度の高い設定ができる Tree-sitterを使うと何が嬉しいのか
11
コードエディターのシンタックスハイライトの話 Twitter: @arata_nvm 2024/05/11 #until_lt0x04 • LSPのアウトライン機能を使わず、Tree-sitterのクエリ を使って独自実装している ◦ アウトライン機能: クラスやフィールド、見出しの一覧機能
◦ 統一感をもたせることが目的らしい • ソースコード中に埋め込まれた別言語のソースコードに シンタックスハイライトを効かせる機能がある ◦ e.g. HTMLの<script>内に書かれたJavaScript Zedのおもしろいところ 12
コードエディターのシンタックスハイライトの話 Twitter: @arata_nvm 2024/05/11 #until_lt0x04 https://zed.dev/ おわりに 13