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
Markdown を拡張する話
Search
Koutarou Chikuba
August 29, 2017
Technology
9
8.8k
Markdown を拡張する話
at Markdown Night 2017 Summer
Koutarou Chikuba
August 29, 2017
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
CI/CD 改善の勘所
mizchi
0
110
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
16
5.5k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.3k
V8 as a container on CDN Edge worker
mizchi
6
2.3k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
8
4.4k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
7
2.5k
「フロントエンド領域」を再定義する
mizchi
50
37k
Other Decks in Technology
See All in Technology
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
1.1k
Claude Codeは仕様駆動の夢を見ない
gotalab555
23
6.8k
Amazon Qで2Dゲームを作成してみた
siromi
0
150
Backlog AI アシスタントが切り開く未来
vvatanabe
1
140
S3 Glacier のデータを Athena からクエリしようとしたらどうなるのか/try-to-query-s3-glacier-from-athena
emiki
0
230
Lambda management with ecspresso and Terraform
ijin
2
170
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
850
Amazon Q と『音楽』-ゲーム音楽もAmazonQで作成してみた感想-
senseofunity129
0
150
「AIと一緒にやる」が当たり前になるまでの奮闘記
kakehashi
PRO
3
150
「Roblox」の開発環境とその効率化 ~DAU9700万人超の巨大プラットフォームの開発 事始め~
keitatanji
0
130
薬屋のひとりごとにみるトラブルシューティング
tomokusaba
0
370
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
740
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
A Tale of Four Properties
chriscoyier
160
23k
Automating Front-end Workflow
addyosmani
1370
200k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
For a Future-Friendly Web
brad_frost
179
9.9k
Embracing the Ebb and Flow
colly
86
4.8k
Transcript
MarkdownΛ֦ு͢Δ mizchi @ Markdown Night 2017 Summer
ࣗݾհ • @mizchi • SPA৬ਓ/Node.jsΤϯδχΞ • 4݄͔ΒϑϦʔϥϯε
ࠓ݄ͷਐḿ
ࣗͱMarkdown • લʑ৬(Quipper)ͰMarkdownΛ༻͍ͨڭࡐΦʔαϦϯάπʔ ϧͷ։ൃ • લ৬(Qiita)Ͱ Kobito ༻ͷ Markdown ίϯύΠϥͷ։ൃ
ۀMarkdownΦʔαϦϯάྺɺܭ3͙Β͍
୭͚ͷൃද͔ • ԿΒ͔ͷࣄͰ markdown Λ֦ு͠ͳ͚ΕͳΒͳ͍ਓ • AST ͕͖ͳਓ • GFM/Commonmark
ͷ༷ΛकΔ࣏తਖ਼͠͞ͱ͔ɺ͜ͷൃද ͷதʹ͓͍ͯͲ͏Ͱ͍͍…
ࠓͷൃද༰ • ֦ுͷࢦ • remark ΤίγεςϜͷհ • ΑΓΑ͍ WYSIWYG ͷͨΊʹ
ࠓ͞ͳ͍͜ͱ • GFM/Commonmark ͳͲͷྺ࢙ɾৄࡉ • ଞͷൃදऀ͕ޠͬͯ͘ΕΔͰ͠ΐ͏ • ੲॻ͍ͨࢿྉ: QiitaͱMarkdownͱίϯςϯπΦʔαϦϯά http://qiita.com/mizchi/items/
17bc6c123207be7e6636
֦ுͷࢦΛߟ͑Δ
Markdownͷྑ͍ • ϓϨʔϯςΩετͰ ൺֱత ಡΈ͍͢ • ҟͳΔαʔϏεͰ૬ޓӡ༻ੑ͕͋Δ (GitHub, Qiita, ͯ
ͳϒϩά, etc…)
Markdownͷྑ͍ • ϓϨʔϯςΩετͰ ൺֱత ಡΈ͍͢ • ҟͳΔαʔϏεͰ૬ޓӡ༻ੑ͕͋Δ (GitHub, Qiita, ͯ
ͳϒϩά, etc…) <= ???
ݱ࣮ • ͋ΔίϯύΠϥͷग़ྗͷɺผͷίϯύΠϥͰͷ࠶ݱࠔ • https://babelmark.github.io/ • Markdown ͱ͍͏ʮجຊతͳ֓೦ʯΛڞ༗͢Δ͚ͩͷɺผͳԿ ͔ͩͱࢥ͏ͷ͕ແ
Τοδέʔεͷྫ - a - b - c -d - e
https://babelmark.github.io/?text=-+a++++-+b++-+c+ ++-d+-+e
Markdownπʔϧ։ൃऀͱͯ͠ࢥ͏͜ͱ • ग़ྗϒϨΛग़͞ͳ͍ͨΊʹΫϥαόͰ୯Ұ࣮͕ྑ͍ • ΫϥΠΞϯτͰDOMΛԚ͞ͳ͍Α͏ʹ֦ு͍ͨ͠ • ϦΞϧλΠϜฤूͷͨΊʹதؒঢ়ଶ͔ΒVDOMΛు͖͍ͨ => ΑͬͯɺJS࣮͕Ұ൪خ͍͠ ※
Node.js ΤϯδχΞͷҙݟ
ԾDOMϓϨϏϡʔͷར • ૉͳ࣮͢Δͱɺଧ伴͝ͱʹ el.innerHTML = markdown.compile(md) ͕Δ • ංେԽ͢ΔͱೖྗͰக໋తʹ͘ͳΔ •
AST·Ͱύʔεͯ͠ԾDOMΞϧΰϦζϜʹͿΜ͛Δ͜ͱͰ 16ms ҎԼΛୡͰ͖Δ
Markdown֦ுͷࢦ 1.֦ு͠ͳ͍ 2.֦ு͢ΔͳΒߦّΑ͘
1. ֦ு͠ͳ͍ • ҟͳΔαʔϏεؒͷ૬ޓӡ༻ੑΛഁյ͢ΔͱɺMarkdownͰ͋ ΔϝϦοτ͕ബΕΔ • ओཁͳϦςϥϧ(* _ - #
+ >) ɺύʔεΛࠔʹ͢ΔͷͰ ৮Δ͖Ͱͳ͍
2. ֦ு͢ΔͳΒߦّΑ͘ • GFM ͷ fenced codeblock ͷதΛͲ͏ग़ྗ͢Δ͔࣮࣭ ࣗ༝ •
ϦςϥϧΛ֦ு͢Δ߹ɺGFMͰະ༷ͷϦςϥϧΛ͏($ %) • جຊࣗ༝هड़ͱ͍͏ͷΛΕͳ͍Α͏ʹ
ྫ: fenced-codeblock ֦ு \`\`\`mermaid graph TD; A-->B; A-->C; B-->D; C-->D;
\`\`\` mermaid.js ͷਤΛຒΊࠐΜͩΓ…
ྫ: ࣜϦςϥϧ֦ு $ x^2 + y^2 = z^2 $ •
$ ~ $ Λ math ϊʔυͱͯ͠ύʔε • Khan/KaTeX ͰίϯύΠϧͯ͠ຒΊࠐΉ ͱ͔͍ͨ͠
࣮ࡍʹ͜ΕΒΛ࣮ͯ͠ΈΑ͏ʂ
ͱࢥ͕ͬͨ… • લ৬ɺલʑ৬ͷϦϙδτϦʹίʔυஔ͍͖ͯͨ • ֓೦͚ͩஔ͍͍ͯ͘ͷͰ֤ࣗదʹ࣮͍ͯͩ͘͠͞
JS ͷ Markdown ॲཧܥ • chjj/marked • egoist/marked3 • showdown
• markdown-js • wooorm/remark
JS ͷ Markdown ॲཧܥ • chjj/marked • egoist/marked3 • showdown
• markdown-js • wooorm/remark <- ͓͢͢Ί
remark • github.com/wooorm/remark • wooorm ࢯࣗવݴޠॲཧͷݚڀऀɻ ଞɺ retext ͳͲ •
๛ͳϓϥάΠϯ: https://github.com/wooorm/ remark/blob/master/doc/plugins.md • GFMΦϓγϣϯɺ CommonmarkΦϓγϣϯ͕͋Δ
remark: ຊମ • remark-parse: Markdown Parser • remark-stringify: MarkdownAST =>
HTML • remark-cli: CLIπʔϧ
remark: ϓϥάΠϯͷྫ • remark-react: MarkdownAST => React • remark-lint: Style
Linter • remark-emoji: emoji֦ு • remark-lowlight: ίʔυͷγϯλοΫεϋΠϥΠτ • remark-inline-math: ֦ࣜு • remark-toc: ToCੜ
remark: ΤίγεςϜ • unist: Universal AST • mdast: Markdown AST
• hast: HTML AST ͦΕͧΕͷஈ֊͝ͱʹద༻Մೳͳ plugin ܊
unist https://github.com/syntax-tree/unist • ൚༻తͳ AST ఆٛ • ࣮ମͳ͍͕ traverse ͷ࣮͕͋Δ
mdast https://github.com/syntax-tree/mdast • Markdown ͷ AST ఆٛ • unist αϒηοτ
• ࣮ https://github.com/wooorm/mdast-util-to- hast
hast https://github.com/syntax-tree/hast • HTML ͷ AST ఆٛ • ͜ͷͷརͱͯ͠ɺ hast
=> HTML hast => React ͷந͕Ͱ͖Δ • αχλΠβͳͲ͜ͷͰ࣮
remark: ࣮ࡍͷ֦ுͷྲྀΕ 1.remarkͷϓϥάΠϯͱ࣮ͯ͠ • ASTͷ෦ॻ͖͑ͳΒे 2.ຊମΛ fork ࣮ͯ͠ • remark-parse
ͷ tokenizer Λ࣮ • mdast-util-to-hast ͰରԠ͢Δϊʔυͷ HTML ग़ྗΛ هड़
৭ʑࢼͨ͠ྫ • https://github.com/mizchi/remark • https://github.com/mizchi/mdast-util-to-hast ※ϓϥάΠϯͷ࡞ྫ͕গͳ͍࣌ʹຊମΛforkͯ͠ ࣜɺ emojiɺ@<username> Λ֦ுͨ͠ϦϙδτϦ
remark: ·ͱΊ • ෳͷASTͷεςʔδʹհೖՄೳͳJSͷMarkdownίϯύΠϥ • ϓϥάΠϯ๛Ͱศར • ΈΜͳϓϥάΠϯΛ࡞Ζ͏!!!
ΑΓΑ͍ WYSIWYG ͷઃܭͷͨΊʹ
ͦͦ WYSIWYG ඞཁ͔ • ͿͬͪΌ͚ϓϩάϥϚಉ࢜ͳΒෆཁ • Markdown ͕ྲྀߦͬͨͷ ෳࡶոحͳ WYSIWYG
ͷಈ • BtoC ͩͱආ͚ΒΕͳ͍ͷͰߟ͓͑ͯ͘
Մٯʹม͢Ε…ʁ
draft-js Ͱ markdown Λ૬ޓม • draft-js: FacebookͷWYSIWYGج൫ • draft-js-import-markdown Ͱ
markdown Λೖྗ • draft-js-export-markdown Ͱ markdown Λग़ྗ
draft-js Ͱ markdown Λ૬ޓม • ෦දݱͷϚελʔσʔλΛmarkdownͰѻ͏ͱɺWYSIWYG <=> Markdown Λ૬ޓʹΓସ͑ΒΕͯخ͍͠ͷͰ •
git Ͱ diff ΛऔΕΔ / PR ʹࡌͤΒΕΔ • Ͳͬͪͷਓຬ
͜ͷํ๏ͷ • draft-js ͷ WYSIWYG ͷϓϨϏϡʔ࣮ͱ Markdownग़ྗ ͷʮݟͨʯΛ͋Θͤͳ͍ͱ͍͚ͳ͍ • A
=> B => A ͕Մٯ͔ผͷ • draft-js ͷ࣮ͱ֦ு͕݁ߏਏ͍ (immutable.js ͷਂ͍ ཧղ͕ඞཁ) ͍ͣΕʮؾ߹ʯͰղܾ͢Δ͕…
ଞͷҊ • slate.js: draft-js ͷ alternative • prosemirror: ·͞ʹ markdown
<=> wysiwyg ͕֦ͩு ੑ͕͍ • markdown ͦͷͷʹϋΠϥΠτΛ͢Δ + ೖྗࢧԉ
݁ ؤுΕͰ͖Δ͕ؤுΓͨ͘ͳ͍
࠷ޙʹ • MarkdownߦّΑ֦͘ு͠·͠ΐ͏ • ༻్ʹԠͯ͡MarkdownίϯύΠϥΛ࡞Γ͍ͨํ @mizchi ͕͓ࣄঝΓ·͢
͓·͚1: ReactNativeͷՄೳੑ • mdast => react-native-elements ʹίϯύΠϧ͢Εɺ WebViewΛආ͚ͯߴͳϓϨϏϡʔ͕ՄೳͰ • ΕͰ͖Δ͜ͱΘ͔ͬͯΔ͚Ͳ…
• ࣌ؒͳͯͬͯ͘ͳ͍ • ͲͷυϝΠϯͷձࣾͰͦΕ͕ඞཁ͔ෆ໌
͓·͚2: Node.jsӡ༻ͷ • SEOॏࢹͷ߹ɺ JS࣮ͩͱ React ͷ Server Side Rendering
ͱಉ͡ɺͲ͜ͰNodeϓϩηεΛཧ͢Δ͔ͷ ͕ൃੜ • NodeϓϩηεΛͿΒԼ͛Δ͔ɺ AWS Lambda ্ͷϚΠΫϩα ʔϏεʹͯ͠͠·͏͔
͓·͚3: γϯλοΫεϋΠϥΠλʔ͕Ͱ͔͍ • highlight.js, lowlight ͍ͣΕɺΫϥΠΞϯτ͕ίʔυ ϋΠϥΠλʔΛ࣋ͭͱɺߏจఆٛͰαΠζ͕ΕΔ • ඞཁͳίʔυ͚ͩϩʔυ͢ΔΈΛ࡞ΕΔΑ͏ʹ͢Δͷ͕
͍͠
͓·͚4: WASM • C++/Rust ͰMarkdownίϯύΠϥॻ͍ͯ WASM ΛΫϥΠΞϯ τʹ࣋ͬͯ͘Εཧ্Ϣχόʔαϧ • ͦΕͦ͏͕ͩɺ·ͩք۾ͷ
WASM ͷݟ͕Γͳ͍ʂʂʂ
͓·͚5: Kobito for Windows ͷ࣮ • codemirror ͷ markdown ϋΠϥΠτϞʔυ
• codemirror ͷίʔυ͕ͬͯͯਏ͍ • γϯλοΫεϋΠϥΠλʔ͕Ͱ͔͍ΛҾ͖ͣͬͯͯ 1.5MB ͋Δ https://github.com/increments/kobito-oss/tree/ master/packages/markdown-editor
͓·͚6: md2react • ↑ kobito ͷҝʹ։ൃͨ͠ɻ • Reactͷ dangerouslySetInnerHTML ɺ໊લͷ௨ΓյΕ
Δ • ࠓ remark-react ͍ͬͯͩ͘͞
Ҏ্