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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Arata
May 12, 2024
0
180
コードエディターのシンタックスハイライトの話
Arata
May 12, 2024
Tweet
Share
More Decks by Arata
See All by Arata
eBPFを用いたAndroid向けデバッガ「eDBG」のx86_64 Linuxへの移植
arata_nvm
0
4
Pythonのcopy-and-patch JITの実装を読む
arata_nvm
0
86
eBPFを使った動的解析手法
arata_nvm
1
660
カーネルハック実験の振り返り
arata_nvm
1
39
Improving LLVM Backend Development with a New TableGen Language Server
arata_nvm
0
31
LLVMのコード自動生成機構におけるコード記述を支援するツールの作成
arata_nvm
0
82
TableGenの言語サーバーをつくる
arata_nvm
0
590
pwn入門 / introduction to pwn
arata_nvm
1
2.6k
TableGenと和解せよ / make peace with TableGen
arata_nvm
0
160
Featured
See All Featured
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
47
Typedesign – Prime Four
hannesfritz
42
2.9k
The Pragmatic Product Professional
lauravandoore
37
7.1k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
0
2.3k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
770
Abbi's Birthday
coloredviolet
1
4.7k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
61
52k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
56
50k
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
120
The browser strikes back
jonoalderson
0
360
So, you think you're a good person
axbom
PRO
2
1.9k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
370
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