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
65
コードエディターのシンタックスハイライトの話
Arata
May 12, 2024
Tweet
Share
More Decks by Arata
See All by Arata
LLVMのコード自動生成機構におけるコード記述を支援するツールの作成
arata_nvm
0
32
TableGenの言語サーバーをつくる
arata_nvm
0
440
pwn入門 / introduction to pwn
arata_nvm
1
1.9k
TableGenと和解せよ / make peace with TableGen
arata_nvm
0
73
sudo-rsのテストの話 / story of sudo-rs testing
arata_nvm
1
110
ソースコードリーディングはいいぞ / source code reading is good
arata_nvm
0
52
ネットワーク委員会活動報告 / network committee activity report
arata_nvm
0
15
Twitter専用のPCを作る / create a dedicated Twitter PC
arata_nvm
0
30
日中の電子決済システムの比較と分析 / comparison and analysis of Japanese and Chinese electronic payment systems
arata_nvm
0
46
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Testing 201, or: Great Expectations
jmmastey
38
7k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
Automating Front-end Workflow
addyosmani
1365
200k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
VelocityConf: Rendering Performance Case Studies
addyosmani
324
23k
Building Adaptive Systems
keathley
37
2.1k
Ruby is Unlike a Banana
tanoku
96
11k
Infographics Made Easy
chrislema
239
18k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
6
230
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