君だけの最強の markdown をつくろう / Create your strongest markdown syntax

#roppongijs

https://roppongi-js.connpass.com/event/81528/

references

- https://github.com/izumin5210/OHP
- https://github.com/remarkjs/remark
- https://github.com/zestedesavoir/zmarkdown/tree/master/packages/remark-kbd

Transcript

1. 君だけの最強の markdown をつくろう Roppongi.js #1 - by @izumin5210
2. @izumin5210, Web engineer at Wantedly, Inc.
3. いろいろなマークダウン
4. ### CommonMark 標準 ``` # foo ## bar - baz - qux - quux ``` 4
5. ### GFM (Github Flavored Markdown) いつも書いてるやつ ``` table は CommonMark では定義されていない | foo | bar | | --- | --- | | baz | bim | ``` 5
6. ``` task list も CommonMark にない - [x] foo - [ ] bar - [x] baz - [ ] bim ``` 6
7. ### PHP Markdown Extra ``` ``` Qiita 等で使える footnote は PHP Markdown Extra 由来だよ[^1] [^1]: http://blog.qiita.com/post/105484781374/qiita-markdown-supporting 7
8. ところで， 8
9. Markdown でスライド作りたくない？ 9
10. ## Markdown でスライド作るやつ - reveal.js - Marp - Qiita 10
11. ### How to 改ページ ``` みんな Horizontal rules を使って改ページする --- 水平線引けなくなってかなしい… ``` 11
12. ### このスライドも Markdown からできてる（自作） ``` HTML のコメントをいい感じにパースするよ いろんな独自ディレクティブがあるよ <!-- newpage --> <!-- pageNumber enable="false" className="page" --> 例えばこれ↑でページ番号がなくなる このページだけページ番号ないでしょ？ ```
13. ## Custom parser with remark - remarkjs/remark - unified がベース - 「テキストを syntax-tree にする」やつ 13
14. ### How to use remark ``` import remark from 'remark' import html from 'remark-html' remark() .use(html) .process('## Hello world!', (_, file) => { console.log(String(file)) }) // => <h2>Hello world!</h2> ``` 14
15. ### Plugin example: remark-kbd ``` import kbd from 'remark-kbd' remark() .use(kbd) .use(html) .process('||enter||', (_, file) => { console.log(String(file)) }) // => <kbd>enter</kbd> ``` 15
16. ### How to create plugins 戦略は2 パターン - parser & tokenizer をつくる - => `remark-kdb` - visitor + 正規表現でつかまえる - => `mdast-directive-comment` 16
17. ### How to test plugins - input が決まれば output も決まる - snapshot testing が超絶相性いい - `remark-kbd` - `packages/@ohp/processor - izumin5210/OHP` 17
18. remark をつかって 自分だけの最強の Markdown をつくろう！ 18
19. ## REFERENCES - remarkjs/remark - plugin 集もあるよ！ - izumin5210/OHP - このスライドつくったやつ - （ちゃんとメンテしてないのでバグまみれ） 19