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