class: middle, center # スライド資料をmarkdownで書ける remark.js を試しました。 .right[2019/05/12] .right[[Yuu ITO](https://github.com/u110)] --- # Motivation - 自分のサイトにスライドを作成、配置したかったので すでにJekeyll on firebase hosting で動かしている環境に マークダウンでスライド資料が作成できる `remark` というライブラリを利用しました。 --- # remark とは from https://remarkjs.com > _A simple, in-browser, **Markdown-driven slideshow tool** targeted at people who know their way around HTML and CSS ..._ マークダウンで書ける！ - https://remarkjs.com サイトがそのままDemoとして動いている。デザインもシンプルで良さそう。 - https://github.com/gnab/remark/wiki/Formatting#alignment remarkのmarkdown記載フォーマット。一般的なmarkdown記法を知っていれば特に問題なし。 --- # Jeykeyllで動作させるには - 公式で紹介されているのでそのまま進めればOK! - https://github.com/gnab/remark/wiki/Using-with-Jekyll 1. _layout/presentation.html を配置 2. _post/YYYY-MM-DD-new_post.html を作成。 ↑のlayoutを読み込むように 3. jekeyll build こんな感じ ``` --- layout: presentation title: Default Presentation permalink: /presentation-template/ --- # Title --- # Agenda 1. hello 2. hoge ``` --- # ハマったところ（しっかり読めば気づける） > _Create an html file (has to end in .html for it to be rendered correctly by Jekyll) (the file in this example is default-presentation.html) containing your presentation._ 最初の１行で `.html` ファイルで配置してね！とある。 Jekeyll の記事は今までマークダウン(.md)ファイルで書いていたので そのままmarkdown書くと、それっぽく見えるのだけど、 スライドページの切り替わりなどが動作しなかった。。 --- # 原因に気づくポイント: view-sourceの確認 - レンダリングされたhtml内にサラのmarkdownが記載されていること - .md で書いていると、markdownがhtmlタグに生成されていた。 - htmlタグだとremarkが正しく整形してくれないと思われる。 - .htmlで書いたことで、問題なく動いた。現在このページはchromeのview-source: で見るとmarkdownのエリアがあるはずです。 --- # まとめ - remark, 今までのウェブページにスムーズに繋げられたので良かった。 - markdownさいこう。 - 今の仕事場で勉強会があるので公開版の資料置き場にしよう。 - テーマとかもあるのかな。凝りだすと切りないけど、後で調べてみよう。 --- # refs. - https://remarkjs.com - https://github.com/gnab/remark/wiki/Using-with-Jekyll