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
140
コードエディターのシンタックスハイライトの話
Arata
May 12, 2024
Tweet
Share
More Decks by Arata
See All by Arata
LLVMのコード自動生成機構におけるコード記述を支援するツールの作成
arata_nvm
0
53
TableGenの言語サーバーをつくる
arata_nvm
0
550
pwn入門 / introduction to pwn
arata_nvm
1
2.2k
TableGenと和解せよ / make peace with TableGen
arata_nvm
0
120
sudo-rsのテストの話 / story of sudo-rs testing
arata_nvm
1
210
ソースコードリーディングはいいぞ / source code reading is good
arata_nvm
0
62
ネットワーク委員会活動報告 / network committee activity report
arata_nvm
0
23
Twitter専用のPCを作る / create a dedicated Twitter PC
arata_nvm
0
55
日中の電子決済システムの比較と分析 / comparison and analysis of Japanese and Chinese electronic payment systems
arata_nvm
0
99
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
Faster Mobile Websites
deanohume
307
31k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
For a Future-Friendly Web
brad_frost
179
9.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Making Projects Easy
brettharned
116
6.3k
A Tale of Four Properties
chriscoyier
160
23k
Side Projects
sachag
455
42k
Rails Girls Zürich Keynote
gr2m
94
14k
How to Ace a Technical Interview
jacobian
277
23k
Bash Introduction
62gerente
614
210k
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