使えるマークダウンライブラリを探した結果 RailsアプリケーションからRustを使うことになった話

登壇資料

イベント
Rust、何もわからない... #12
https://estie.connpass.com/event/311278/

紹介したライブラリ
https://github.com/markdown-it-rust/markdown-it

コードサンプル
Rust
https://github.com/fursich/markdown-it-sample

Rubyからの利用例
https://github.com/fursich/markdown-it-rubyfied-sample

Transcript

1. 使えるマークダウンライブラリを探した結果 RailsアプリケーションからRustを使うことになった話 2024/02/28 Rust、何もわからない... #12 koji @fursich
3. 3 cderコントリビュートありがとうございます 🎉 special thanks to: @kenkoooo, @hoyo, @hatoo, @SergPonomar https://github.com/estie-inc/cder 複雑な開発⽤シードを 外部キーを保ったまま いい感じにYAML管理できる
4. 4 • kojiと呼ばれています • 数学専攻→外資系広告代理店→エンジニア • 2022年5⽉から業務委託としてestieに参画中 • Rust歴2年弱 • 休⽇は何かしら登っています fursichです。
5. 5 • コンテンツをマークダウンで⼊⼒ ◦ プレビュー・もしくは公開時にHTML変換 ◦ 変換をサーバサイドで⾏う（将来的にはクライアント側でのリアルタイム処理を検討） • ほしいもの ◦ 正確なHTML出⼒ ◦ ⾼速な処理 ◦ ドキュメント化された明確な仕様 ◦ カスタム仕様の柔軟な追加・管理 MarkdownをHTMLに変換したい
6. 6 CommonMark GFM（Github Flavored Markdown） PHP markdown extra Pandoc Multimarkdown ・・・ 統⼀規格はなく、⽂法上の曖昧さが存在するものがある ググるといろんな⽅⾔に当たりがち（運⽤者を困らせる） 「マークダウン」は１つではない
7. 7 CommonMark, GFMは厳密なspecが公開されている • https://spec.commonmark.org/0.31.2/ • https://github.github.com/gfm/
8. 8 マークダウンのカスタマイズ問題
9. 9 背景⾊を表現するマークダウンを追加したい よくある要件１
10. 10 これは<strong>マークダウン</strong>で す これは **マークダウン** です これはマークダウンです
11. 11 これは<mark>マークダウン</mark>です これは ==マークダウン== です これはマークダウンです
12. 12 マークダウン テキスト AST HTML パース レンダリング （実際はブロックとインラインで それぞれパースが⾛る） ⼀般的なマークダウンパーサーがやっていること
13. 13 マークダウン テキスト AST HTML パース レンダリング 改修はあらゆるところに及ぶ ==...== パース規則追加 背景⾊を意味する Nodeの追加 <mark>...</m ark> レンダリング ルール追加
14. 14 コンテンツから ⽬次を⾃動⽣成したい https://zenn.dev/zenn/articles/markdown-guide https://note.com/info/n/n31e4933e7baa よくある要件２
15. 15 ## 最初のタイトル じゅげむじゅげむ ### 次のタイトル ごこうのすりきれ <h2>最初のタイトル</h2> <p>じゅげむじゅげむ</p> <h3>次のタイトル</h3> <p>ごこうのすりきれ</p> ⾒出し1 じゅげむじゅげむ ⾒出し2 ごこうのすりきれ
16. 16 ⾒出し1 じゅげむじゅげむ ⾒出し2 ごこうのすりきれ <ul> <li class=”level-2”> <a href=”#heading-1”>最初のタイトル </a> </li> <li class=”level-3”> <a href=”#heading-2”>次のタイトル</a> </li> </ul> 最初のタイトル 次のタイトル ⽬次 ## 最初のタイトル じゅげむじゅげむ ### 次のタイトル ごこうのすりきれ <h2 id=”heading-1”>最初のタイトル</h2> <p>じゅげむじゅげむ</p> <h3 id=”heading-2”>次のタイトル</h3> <p>ごこうのすりきれ</p> コンテンツ
17. 17 マークダウン テキスト AST HTML パース レンダリング 改修はあらゆるところに及ぶ ASTの トラバース ⽬次⽤ htmlの⽣成 ユニークな idの追加
18. 18 CommonMark（libcmark）ベースのGFM拡張実装例 https://github.com/github/cmark-gfm/tree/master
19. 19 メンテコスト⾼すぎぃ
20. 20 https://github.com/markdown-it-rust/markdown-it TL;DR: • if you want to get result fast, use pulldown-cmark • if you want to render GFM exactly like github, use comrak • if you want to define your own syntax (like @mentions, :emoji:, custom html classes), use this library markdown-it-rustの紹介
21. 21 正確なSPECに基づいている w 根拠となる仕様がコード上に明記 w Rustによる型の保証＋単体テストがしっかりある うれしいこと
22. 22 メンテナーが強⼒  JSの⼈気マークダウンライブラリの作者がメンテナーという安⼼感  remarkable、markdown-itという先⾏ライブラリがある  クライアントサイドに移植する際に同じ仕組みを持っていきやすい うれしいこと
23. 23 とにかく拡張性が⾼い︕︕ w プラガブルな設計 w パース、レンダリング時に⾃由に介⼊可能 w ノードの追加・差し替えも可能 w 豊富な便利APIによるサポート うれしいこと
24. 24 これは<mark>マークダウン</mark>です これは ==マークダウン== です これはマークダウンです やってみる
25. 25 マークダウン テキスト AST HTML ==...== パース規則追加 “Highlight” Nodeの追加 <mark>...</mark> レンダリング ルール追加
26. 26 Nodeの定義
27. 27 マークダウン テキスト AST HTML ==...== パース規則追加 Highlight Nodeの追加 <mark>...</mark> レンダリング ルール追加
28. 28 パースルールの定義 「特定の記号で囲まれたテキスト」のパース規則を定義できる便利関数 Highlight構造体を持つノードを ⽣成するクロージャ
29. 29 マークダウン テキスト AST HTML ==...== パース規則追加 Highlight Nodeの追加 <mark>...</mark> レンダリング ルール追加
30. 30 renderメソッドの定義
31. 31 マークダウン テキスト AST HTML ==...== パース規則追加 ✅ Highlight Nodeの追加 ✅ <mark>...</mark> レンダリング ルール追加 ✅
32. 32 ⾒出し1 じゅげむじゅげむ ⾒出し2 ごこうのすりきれ <ul> <li class=”level-2”> <a href=”#heading-1”>最初のタイトル </a> </li> <li class=”level-3”> <a href=”#heading-2”>次のタイトル</a> </li> </ul> 最初のタイトル 次のタイトル ⽬次 ## 最初のタイトル じゅげむじゅげむ ### 次のタイトル ごこうのすりきれ <h2 id=”heading-1”>最初のタイトル</h2> <p>じゅげむじゅげむ</p> <h3 id=”heading-2”>次のタイトル</h3> <p>ごこうのすりきれ</p> コンテンツ やってみる
33. 33 マークダウン テキスト AST HTML ASTトラバース Hタグへのid付与 ⽬次のレンダリング ルール追加 ⽬次
34. 34 ⽬次を表現するNodeの定義 ⽣成した⽬次は、メインのコンテンツ⾃体の ノートツリー（AST）とは分けておきたいので ExtensionSetという箱に置くことにします。
35. 35 ASTのトラバース メインのAST上を⾛査して、hタグごとに⼀意のid を⽣成してattributeを付与 同時にTocElementを⽣成して、そのタグのidと levelを格納 最後にTocList（＝⽬次を作るための情報）を Rootノードに付随するextに格納
36. 36 ⽬次のレンダリング その他、ルール追加のためのコード、⽬次のextからの取り出しなど（割愛）
37. 37 マークダウン テキスト AST HTML ASTトラバース ✅ Hタグへのid付与 ✅ ⽬次のレンダリング ルール追加 ✅ ⽬次
38. 38 デモ
39. 39 パフォーマンス cargo bench結果 カスタマイズ性が⾼い設計をしている分、パフォーマンスは犠牲になっている
40. 40 FFIを使ってRubyから使ってみる もともとRailsプロジェクトでパーサーを探していた
41. 41 Rubygems3.3.11, bundler 2.4でRustが公式サポートされている $ bundle gem --ext=rust <your-library-name> # これだけでほぼガワが完成 Rust x Ruby
42. 42 ベンチマークライブラリ https://github.com/ioquatix/markly • libcmark準拠＋GFM拡張がされている • ASTトラバース可能・・・Ruby側で⽬次⽣成ができる • 独⾃ノード追加にはC⾔語での改修が必要 https://github.com/increments/qiita-markdown • qiitaのパーサー • デフォルトで⽬次⽣成が可能 • HTML::Pipelineというベースライブラリの仕組みで拡張は可能 ◦ （旧バージョンAPIに依存していてやや不安あり）
43. 43 ライブラリ⽐較 ※ marklyとmarkdown-it-rustには⽬次⽣成機能を実装した上で⽐較 （qiita-markdownは⽬次⽣成機能がある）
44. 44 部分的にRustを導⼊するという選択肢 ˔ LL⾔語のFWとRustのいいところ取りが可能 ˓パフォーマンスや堅牢性が求められる部分の処理をRustで ˔ 低レイヤー⾔語としての速度、⾼級⾔語のような豊富な⾔語機能 ˔ Traitや型が強⼒なので、うまく設計すれば拡張性もかなり⾼くメンテしやすい ˔ コミュニティにも勢いがあり開発が活発なライブラリが多い ˔ 反⾯、運⽤対象の⾔語が増えることによるデメリットはある ˓ が、FFIで利⽤できると管理はかなり楽になる
45. 45 サンプルコード Rustのコードはこちら https://github.com/fursich/markdown-it-sample Rubyで使うサンプル https://github.com/fursich/markdown-it-rubyfied-sample
46. ありがとうございました x (twitter): fursich0 github: fursich