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
95
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
5.4k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.2k
V8 as a container on CDN Edge worker
mizchi
6
2.2k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
7
4.4k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.5k
「フロントエンド領域」を再定義する
mizchi
50
36k
Other Decks in Technology
See All in Technology
初めてのAzure FunctionsをClaude Codeで作ってみた / My first Azure Functions using Claude Code
hideakiaoyagi
1
210
UIテスト自動化サポート- Testbed for XCUIAutomation practice
notoroid
0
130
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.1k
Agentic DevOps時代の生存戦略
kkamegawa
1
1.3k
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
140
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
240
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
260
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
110
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
230
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
170
Agentic Workflowという選択肢を考える
tkikuchi1002
1
490
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Optimizing for Happiness
mojombo
379
70k
What's in a price? How to price your products and services
michaelherold
246
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Designing for Performance
lara
609
69k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Side Projects
sachag
455
42k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
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 ͍ͬͯͩ͘͞
Ҏ্