Markdown を拡張する話

by Koutarou Chikuba

Slide 1

Slide 1 text

MarkdownΛ֦ு͢Δ࿩ mizchi @ Markdown Night 2017 Summer

Slide 2

Slide 2 text

ࣗݾ঺հ • @mizchi • SPA৬ਓ/Node.jsΤϯδχΞ • 4݄͔ΒϑϦʔϥϯε

Slide 3

Slide 3 text

ࠓ݄ͷਐḿ

Slide 4

Slide 4 text

ࣗ෼ͱMarkdown • લʑ৬(Quipper)ͰMarkdownΛ༻͍ͨڭࡐΦʔαϦϯάπʔ ϧͷ։ൃ • લ৬(Qiita)Ͱ Kobito ༻ͷ Markdown ίϯύΠϥͷ։ൃ ۀ຿MarkdownΦʔαϦϯάྺɺܭ3೥͙Β͍

Slide 5

Slide 5 text

୭޲͚ͷൃද͔ • ԿΒ͔ͷࣄ৘Ͱ markdown Λ֦ு͠ͳ͚Ε͹ͳΒͳ͍ਓ • AST ͕޷͖ͳਓ • GFM/Commonmark ͷ࢓༷ΛकΔ੓࣏తਖ਼͠͞ͱ͔ɺ͜ͷൃද ͷதʹ͓͍ͯ͸Ͳ͏Ͱ΋͍͍…

Slide 6

Slide 6 text

ࠓ೔ͷൃද಺༰ • ֦ுͷࢦ਑ • remark ΤίγεςϜͷ঺հ • ΑΓΑ͍ WYSIWYG ͷͨΊʹ

Slide 7

Slide 7 text

ࠓ೔࿩͞ͳ͍͜ͱ • GFM/Commonmark ͳͲͷྺ࢙ɾৄࡉ • ଞͷൃදऀ͕ޠͬͯ͘ΕΔͰ͠ΐ͏ • ੲॻ͍ͨࢿྉ: QiitaͱMarkdownͱίϯςϯπΦʔαϦϯά http://qiita.com/mizchi/items/ 17bc6c123207be7e6636

Slide 8

Slide 8 text

֦ுͷࢦ਑Λߟ͑Δ

Slide 9

Slide 9 text

Markdownͷྑ͍఺ • ϓϨʔϯςΩετͰ΋ ൺֱత ಡΈ΍͍͢ • ҟͳΔαʔϏεͰ૬ޓӡ༻ੑ͕͋Δ (GitHub, Qiita, ͸ͯ ͳϒϩά, etc…)

Slide 10

Slide 10 text

Markdownͷྑ͍఺ • ϓϨʔϯςΩετͰ΋ ൺֱత ಡΈ΍͍͢ • ҟͳΔαʔϏεͰ૬ޓӡ༻ੑ͕͋Δ (GitHub, Qiita, ͸ͯ ͳϒϩά, etc…) <= ???

Slide 11

Slide 11 text

ݱ࣮ • ͋ΔίϯύΠϥͷग़ྗͷɺผͷίϯύΠϥͰͷ࠶ݱ͸ࠔ೉ • https://babelmark.github.io/ • Markdown ͱ͍͏ʮجຊతͳ֓೦ʯΛڞ༗͢Δ͚ͩͷɺผͳԿ ͔ͩͱࢥ͏ͷ͕ແ೉

Slide 12

Slide 12 text

Τοδέʔεͷྫ - a - b - c -d - e https://babelmark.github.io/?text=-+a++++-+b++-+c+ ++-d+-+e

Slide 13

Slide 13 text

Markdownπʔϧ։ൃऀͱͯ͠ࢥ͏͜ͱ • ग़ྗϒϨΛग़͞ͳ͍ͨΊʹΫϥαόͰ୯Ұ࣮૷͕ྑ͍ • ΫϥΠΞϯτͰDOMΛԚ͞ͳ͍Α͏ʹ֦ு͍ͨ͠ • ϦΞϧλΠϜฤूͷͨΊʹதؒঢ়ଶ͔ΒVDOMΛు͖͍ͨ => ΑͬͯɺJS࣮૷͕Ұ൪خ͍͠ ※ Node.js ΤϯδχΞͷҙݟ

Slide 14

Slide 14 text

Ծ૝DOMϓϨϏϡʔͷར఺ • ૉ๿ͳ࣮૷͢Δͱɺଧ伴͝ͱʹ el.innerHTML = markdown.compile(md) ͕૸Δ • ංେԽ͢ΔͱೖྗͰக໋తʹ஗͘ͳΔ • AST·Ͱύʔεͯ͠Ծ૝DOMΞϧΰϦζϜʹͿΜ౤͛Δ͜ͱͰ 16ms ҎԼΛୡ੒Ͱ͖Δ

Slide 15

Slide 15 text

Markdown֦ுͷࢦ਑ 1.֦ு͠ͳ͍ 2.֦ு͢ΔͳΒߦّΑ͘

Slide 16

Slide 16 text

1. ֦ு͠ͳ͍ • ҟͳΔαʔϏεؒͷ૬ޓӡ༻ੑΛഁյ͢ΔͱɺMarkdownͰ͋ ΔϝϦοτ͕ബΕΔ • ओཁͳϦςϥϧ(* _ - # + >) ͸ɺύʔεΛࠔ೉ʹ͢ΔͷͰ ৮Δ΂͖Ͱ͸ͳ͍

Slide 17

Slide 17 text

2. ֦ு͢ΔͳΒߦّΑ͘ • GFM ͷ fenced codeblock ͷத਎ΛͲ͏ग़ྗ͢Δ͔͸࣮࣭ ࣗ༝࿮ • ϦςϥϧΛ֦ு͢Δ৔߹ɺGFMͰ΋ະ࢓༷ͷϦςϥϧΛ࢖͏($ %) • جຊ͸ࣗ༝هड़ͱ͍͏ͷΛ๨Εͳ͍Α͏ʹ

Slide 18

Slide 18 text

ྫ: fenced-codeblock ֦ு \`\`\`mermaid graph TD; A-->B; A-->C; B-->D; C-->D; \`\`\` mermaid.js ͷਤΛຒΊࠐΜͩΓ…

Slide 19

Slide 19 text

ྫ: ਺ࣜϦςϥϧ֦ு $ x^2 + y^2 = z^2 $ • $ ~ $ Λ math ϊʔυͱͯ͠ύʔε • Khan/KaTeX ͰίϯύΠϧͯ͠ຒΊࠐΉ ͱ͔͍ͨ͠

Slide 20

Slide 20 text

࣮ࡍʹ͜ΕΒΛ࣮૷ͯ͠ΈΑ͏ʂ

Slide 21

Slide 21 text

ͱࢥ͕ͬͨ… • લ৬ɺલʑ৬ͷϦϙδτϦʹίʔυ͸ஔ͍͖ͯͨ • ֓೦͚ͩஔ͍͍ͯ͘ͷͰ֤ࣗద౰ʹ࣮૷͍ͯͩ͘͠͞

Slide 22

Slide 22 text

JS ͷ Markdown ॲཧܥ • chjj/marked • egoist/marked3 • showdown • markdown-js • wooorm/remark

Slide 23

Slide 23 text

JS ͷ Markdown ॲཧܥ • chjj/marked • egoist/marked3 • showdown • markdown-js • wooorm/remark <- ͓͢͢Ί

Slide 24

Slide 24 text

remark • github.com/wooorm/remark • wooorm ࢯ͸ࣗવݴޠॲཧͷݚڀऀɻ ଞɺ retext ͳͲ • ๛෋ͳϓϥάΠϯ: https://github.com/wooorm/ remark/blob/master/doc/plugins.md • GFMΦϓγϣϯɺ CommonmarkΦϓγϣϯ͕͋Δ

Slide 25

Slide 25 text

remark: ຊମ • remark-parse: Markdown Parser • remark-stringify: MarkdownAST => HTML • remark-cli: CLIπʔϧ

Slide 26

Slide 26 text

remark: ϓϥάΠϯͷྫ • remark-react: MarkdownAST => React • remark-lint: Style Linter • remark-emoji: emoji֦ு • remark-lowlight: ίʔυͷγϯλοΫεϋΠϥΠτ • remark-inline-math: ਺֦ࣜு • remark-toc: ToCੜ੒

Slide 27

Slide 27 text

remark: ΤίγεςϜ • unist: Universal AST • mdast: Markdown AST • hast: HTML AST ͦΕͧΕͷஈ֊͝ͱʹద༻Մೳͳ plugin ܊

Slide 28

Slide 28 text

unist https://github.com/syntax-tree/unist • ൚༻తͳ AST ఆٛ • ࣮ମ͸ͳ͍͕ traverse ͷ࣮૷͕͋Δ

Slide 29

Slide 29 text

mdast https://github.com/syntax-tree/mdast • Markdown ͷ AST ఆٛ • unist αϒηοτ • ࣮૷͸ https://github.com/wooorm/mdast-util-to- hast

Slide 30

Slide 30 text

hast https://github.com/syntax-tree/hast • HTML ͷ AST ఆٛ • ͜ͷ૚ͷར఺ͱͯ͠ɺ hast => HTML ΍ hast => React ͷந৅͕Ͱ͖Δ • αχλΠβͳͲ΋͜ͷ૚Ͱ࣮૷

Slide 31

Slide 31 text

remark: ࣮ࡍͷ֦ுͷྲྀΕ 1.remarkͷϓϥάΠϯͱ࣮ͯ͠૷ • ASTͷ෦෼ॻ͖׵͑ͳΒे෼ 2.ຊମΛ fork ࣮ͯ͠૷ • remark-parse ͷ tokenizer Λ࣮૷ • mdast-util-to-hast ͰରԠ͢Δϊʔυͷ HTML ग़ྗΛ هड़

Slide 32

Slide 32 text

৭ʑࢼͨ͠ྫ • https://github.com/mizchi/remark • https://github.com/mizchi/mdast-util-to-hast ※ϓϥάΠϯͷ࡞ྫ͕গͳ͍࣌୅ʹຊମΛforkͯ͠ ਺ࣜɺ emojiɺ@ Λ֦ுͨ͠ϦϙδτϦ

Slide 33

Slide 33 text

remark: ·ͱΊ • ෳ਺ͷASTͷεςʔδʹհೖՄೳͳJSͷMarkdownίϯύΠϥ • ϓϥάΠϯ๛෋Ͱศར • ΈΜͳ΋ϓϥάΠϯΛ࡞Ζ͏!!!

Slide 34

Slide 34 text

ΑΓΑ͍ WYSIWYG ͷઃܭͷͨΊʹ

Slide 35

Slide 35 text

ͦ΋ͦ΋ WYSIWYG ͸ඞཁ͔ • ͿͬͪΌ͚ϓϩάϥϚಉ࢜ͳΒෆཁ • Markdown ͕ྲྀߦͬͨͷ͸ ෳࡶոحͳ WYSIWYG ΁ͷ൓ಈ • BtoC ͩͱආ͚ΒΕͳ͍ͷͰߟ͓͑ͯ͘

Slide 36

Slide 36 text

Մٯʹม׵͢Ε͹…ʁ

Slide 37

Slide 37 text

draft-js Ͱ markdown Λ૬ޓม׵ • draft-js: Facebook੡ͷWYSIWYGج൫ • draft-js-import-markdown Ͱ markdown Λೖྗ • draft-js-export-markdown Ͱ markdown Λग़ྗ

Slide 38

Slide 38 text

draft-js Ͱ markdown Λ૬ޓม׵ • ಺෦දݱͷϚελʔσʔλΛmarkdownͰѻ͏ͱɺWYSIWYG <=> Markdown Λ૬ޓʹ੾Γସ͑ΒΕͯخ͍͠ͷͰ͸ • git Ͱ diff ΛऔΕΔ / PR ʹࡌͤΒΕΔ • Ͳͬͪͷਓ΋ຬ଍

Slide 39

Slide 39 text

͜ͷํ๏ͷ໰୊ • draft-js ͷ WYSIWYG ͷϓϨϏϡʔ࣮૷ͱ Markdownग़ྗ ͷʮݟͨ໨ʯΛ͋Θͤͳ͍ͱ͍͚ͳ͍ • A => B => A ͕Մٯ͔͸ผͷ໰୊ • draft-js ͷ࣮૷ͱ֦ு͕݁ߏਏ͍ (immutable.js ͷਂ͍ ཧղ͕ඞཁ) ͍ͣΕ΋ʮؾ߹ʯͰղܾ͢Δ͕…

Slide 40

Slide 40 text

ଞͷҊ • slate.js: draft-js ͷ alternative • prosemirror: ·͞ʹ markdown <=> wysiwyg ͕֦ͩு ੑ͕௿͍ • markdown ͦͷ΋ͷʹϋΠϥΠτΛ͢Δ + ೖྗࢧԉ

Slide 41

Slide 41 text

݁࿦ ؤுΕ͹Ͱ͖Δ͕ؤுΓͨ͘ͳ͍

Slide 42

Slide 42 text

࠷ޙʹ • Markdown͸ߦّΑ֦͘ு͠·͠ΐ͏ • ༻్ʹԠͯ͡MarkdownίϯύΠϥΛ࡞Γ͍ͨํ͸ @mizchi ͕͓࢓ࣄঝΓ·͢

Slide 43

Slide 43 text

͓·͚1: ReactNativeͷՄೳੑ • mdast => react-native-elements ʹίϯύΠϧ͢Ε͹ɺ WebViewΛආ͚ͯߴ଎ͳϓϨϏϡʔ͕ՄೳͰ͸ • ΍Ε͹Ͱ͖Δ͜ͱ͸Θ͔ͬͯΔ͚Ͳ… • ࣌ؒͳͯ͘΍ͬͯͳ͍ • ͲͷυϝΠϯͷձࣾͰͦΕ͕ඞཁ͔ෆ໌

Slide 44

Slide 44 text

͓·͚2: Node.jsӡ༻ͷ໰୊ • SEOॏࢹͷ৔߹ɺ JS࣮૷ͩͱ React ͷ Server Side Rendering ͱಉ͡ɺͲ͜ͰNodeϓϩηεΛ؅ཧ͢Δ͔ͷ໰୊ ͕ൃੜ • NodeϓϩηεΛͿΒԼ͛Δ͔ɺ AWS Lambda ্ͷϚΠΫϩα ʔϏεʹͯ͠͠·͏͔

Slide 45

Slide 45 text

͓·͚3: γϯλοΫεϋΠϥΠλʔ͕Ͱ͔͍໰ ୊ • highlight.js, lowlight ͍ͣΕ΋ɺΫϥΠΞϯτ͕ίʔυ ϋΠϥΠλʔΛ࣋ͭͱɺߏจఆٛͰαΠζ͕๲ΕΔ • ඞཁͳίʔυ͚ͩϩʔυ͢Δ࢓૊ΈΛ࡞ΕΔΑ͏ʹ͢Δͷ͕೉ ͍͠

Slide 46

Slide 46 text

͓·͚4: WASM • C++/Rust ͰMarkdownίϯύΠϥॻ͍ͯ WASM ΛΫϥΠΞϯ τʹ࣋ͬͯ͘Ε͹ཧ࿦্Ϣχόʔαϧ • ͦΕ͸ͦ͏͕ͩɺ·ͩք۾ͷ WASM ͷ஌ݟ͕଍Γͳ͍ʂʂʂ

Slide 47

Slide 47 text

͓·͚5: Kobito for Windows ͷ࣮૷ • codemirror ͷ markdown ϋΠϥΠτϞʔυ • codemirror ͷίʔυ͕෗ͬͯͯਏ͍ • γϯλοΫεϋΠϥΠλʔ͕Ͱ͔͍໰୊ΛҾ͖ͣͬͯͯ 1.5MB ͋Δ https://github.com/increments/kobito-oss/tree/ master/packages/markdown-editor

Slide 48

Slide 48 text

͓·͚6: md2react • ↑ kobito ͷҝʹ։ൃͨ͠ɻ • Reactͷ dangerouslySetInnerHTML ͸ɺ໊લͷ௨ΓյΕ Δ • ࠓ͸ remark-react ࢖͍ͬͯͩ͘͞

Slide 49

Slide 49 text

Ҏ্