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
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Building an army of robots
kneath
306
45k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Pragmatic Product Professional
lauravandoore
35
6.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
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