君だけの最強の 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
   

   View Slide

2. @izumin5210, Web engineer at Wantedly, Inc.
   

   View Slide

3. いろいろなマークダウン
   

   View Slide

4. ### CommonMark
   標準
   ```
   # foo
   ## bar
   - baz
   - qux
   - quux
   ```
   4
   

   View Slide

5. ### GFM (Github Flavored Markdown)
   いつも書いてるやつ
   ```
   table は CommonMark では定義されていない
   | foo | bar |
   | --- | --- |
   | baz | bim |
   ```
   5
   

   View Slide

6. ```
   task list も CommonMark にない
   - [x] foo
   - [ ] bar
   - [x] baz
   - [ ] bim
   ```
   6
   

   View Slide

7. ### PHP Markdown Extra
   ```
   ```
   Qiita 等で使える footnote は PHP Markdown Extra 由来だよ[^1]
   [^1]: http://blog.qiita.com/post/105484781374/qiita-markdown-supporting
   7
   

   View Slide

8. ところで，
   8
   

   View Slide

9. Markdown
   でスライド作りたくない？
   9
   

   View Slide

10. ## Markdown
    でスライド作るやつ
    - reveal.js
    - Marp
    - Qiita
    10
    

    View Slide

11. ### How to
    改ページ
    ```
    みんな Horizontal rules を使って改ページする
    ---
    水平線引けなくなってかなしい…
    ```
    11
    

    View Slide

12. ###
    このスライドも Markdown
    からできてる（自作）
    ```
    HTML のコメントをいい感じにパースするよ
    いろんな独自ディレクティブがあるよ
    
    
    例えばこれ↑でページ番号がなくなる
    このページだけページ番号ないでしょ？
    ```
    

    View Slide

13. ## Custom parser with remark
    - remarkjs/remark
    - unified
    がベース
    -
    「テキストを syntax-tree
    にする」やつ
    13
    

    View Slide

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))
    })
    // => Hello world!
    ```
    14
    

    View Slide

15. ### Plugin example: remark-kbd
    ```
    import kbd from 'remark-kbd'
    remark()
    .use(kbd)
    .use(html)
    .process('||enter||', (_, file) => {
    console.log(String(file))
    })
    // => enter
    ```
    15
    

    View Slide

16. ### How to create plugins
    戦略は2
    パターン
    - parser & tokenizer
    をつくる
    - => `remark-kdb`
    - visitor +
    正規表現でつかまえる
    - => `mdast-directive-comment`
    16
    

    View Slide

17. ### How to test plugins
    - input
    が決まれば output
    も決まる
    - snapshot testing
    が超絶相性いい
    - `remark-kbd`
    - `packages/@ohp/processor - izumin5210/OHP`
    17
    

    View Slide

18. remark
    をつかって
    自分だけの最強の Markdown
    をつくろう！
    18
    

    View Slide

19. ## REFERENCES
    - remarkjs/remark
    - plugin
    集もあるよ！
    - izumin5210/OHP
    -
    このスライドつくったやつ
    -
    （ちゃんとメンテしてないのでバグまみれ）
    19
    

    View Slide