matsubara0507/makeSlideUsingMarkdown.md

## makeSlideUsingMarkdown.md

      
    Raw
  

              makeSlideUsingMarkdown.md
            
          
    Pandoc + reveal.jsでMarkdownによるスライド作成

概要

Pandoc + reveal.jsでMarkdownによるスライド作成をWindowsで行えるようにするまでの環境づくりの手順。

と、イロイロといじったのでそれをメモしておく。
いきさつ

Markdownでサクッとスライドが作れるといいなーと思って昨年ぐらいより Pandoc + reveal.js を使い始めた。

PCを新しくしたついでに環境をイロイロ整え直したので、それをメモしておこーかなと。
目標


Pandoc入れて
reveal.js 入れて
イロイロといじる

Pandoc 入れて

Pandoc is 何 ?

Markdownで書かれたテキストを様々な別の形式に変換してくれる(texとかhtmlとか)すごいやつ

公式サイト
日本語のユーザーズガイド

この辺りを読めばだいたいわかる。

個人的にはHaskell製ってとこが好みです。
インストール

(公式サイトに書いてあるけど)Windowsの場合インストーラーがあります。

なので、Chocolatey とかを利用してインストーラーで入れるのが一番手っ取り場合と思います。

私の場合、既に Haskell をstack を利用して 入れてあったので、 stack install pandoc とかして入れました。
reveal.js入れて

reveal.js is 何 ?

HTMLでのプレゼンテーションフレームワークで、とてもかっこいい。

レイアウトとかコルのめんどくさい or そんな時間がない人向けですね。

デフォルトでMarkdownからreveal.jsに変換するやつが(たしか) あるんですけど、なんか使いにくかったんでPandocを使ってます。

Github
サンプル (スペースで進む)

個人的には PDFにレイアウトしなおして変換してくれるのがうれしい機能ですね(PDFにするのはブラウザの印刷機能ですがw)。

HTMLのままだとSlide Share とかにあげれないので。
インストール

(GitHubのREADMEに書いてあるけど) Full setup と Basic setup の2種類がある。
Full setup 場合はGruntっていうWeb開発の色んなコトを自動化してくれるツールを利用してLocalなWebサーバ上に作ったスライドを置いてくれるなどの色んな機能を利用できるようにインストールする。

こっちのほうがきっと便利なんだろうけど めんどい ので簡単なBasic setupをやった。
個人的には Basic setup の機能でも十分だし...

(いずれは Full setup も試したいです。)
Basic setup の場合はすごく簡単で GitHubのリリースページにある最新のソースコード一式をまるっと落としてくるだけ。
イロイロといじる`

簡単に実行するために

こんな感じのバッチファイルを書いておく
> cat make.bat
pandoc -s -t revealjs -V theme:black -o slide.html slide.md --slide-level=2 --highlight-style=espresso
start slide.html

そうすれば、ダブルクリックするかコマンドプロンプトで > make.bat でMarkdownをHTMLに変換して既定のブラウザで開かれる。
ちなみに、オプションを説明すると

-s: 適切なヘッダとかフッダとかをつけてくれる

ブラウザで見るなら必要みたい。


-t revealjs: -tオプションで変換形式を指定してる
-V theme:black: テーマの指定

-V オプションでテーマやらテンプレートやら出力固有の設定ができる
テーマ一覧はこちら


--slide-level=2: スライドの構造を2次元にしてる

具体的には指定した数だけ章やら節ができる
指定した数以外はタイトルしか入れれないことに注意
指定した数 = # の個数に対応してるよ


--highlight-style=espresso:  貼り付けるソースコードの色合いを指定してる

pygments (デフォルト値), kate,  monochrome, espresso, zenburn, haddock, tango の7種


スライドから変更を加える

(別にこれに限った話じゃないけど)

ブラウザで描画中に気になるところを右クリックして 要素の検証 とか 検証 とかをクリックすると開発者モード (?) でそこのレイアウトに対応する HTMLコードやCSSコードが出てくる。

これを利用して直接書き換えれば、一時的に変更できる。

変更の仕方を決めたら、reveal.jsを直接書き換えれば閉じた後も反映されるよ(あたりまえだけど)。
フォントをいじる

CSSファイル(たぶんthemeのとこの)のfont-family あたりを書き換えれば等幅フォントを使うのか、そういうのをいじれた。
フォント自体は直接指定できないみたい(?) でそれはブラウザのフォントをいじればいいみたい。
.reveal code {
  font-family: monospace; }
とすればコードが等幅フォントになった。
ソースコードのフォントサイズをいじる

ソースコードは ~~~ で囲めばでき、
~~~Haskell
main = putStrLn  "Hello,World."
~~~

とやれば言語ごとにハイライトをしてくれのだが、実は
~~~{.haskell}
main = putStrLn  "Hello,World."
~~~

でもよく、こっちの場合 HTML タグをイロイロいじれる。
~~~{.haskell style="font-size:1rem;"}
main = putStrLn  "Hello,World."
~~~

とか書いてあげれば、ソースごとにフォントサイズを指定できる。

しかし、このままだと入れ子の中のHTMLタグのフォントサイズ設定が絶対評価になってるので変わらない。
要するに利用してるテーマのCSSファイルの code 部分に
.reveal pre code {
  display: block;
  padding: 5px;
  overflow: auto;
  max-height: 400px;
  word-wrap: normal;
  background: #3F3F3F;
  color: #DCDCDC;
  font-size: 2em; /* ココと */
  line-height: normal;} /* ココ */
と書けばよい。
(em でなくて % でもよい)
画像のサイズ

Markdouwn から 画像のサイズを指定したい。

試行錯誤した結果無理みたい...orz

結果、吐き出されたHTMLを直接書き換えるしかない。

imgのHTML タグに style="height:15rem;" とか書けば画像ごとに指定できる。

スライドが完成したら変更しよう。
revealjs の参照先を統一する

スライド毎にrevealjs のフォルダができて重そう...だったので参照先を統一したい。

Full setupとか使えばいいんだろうけど、Basic setup でも力技でやってみる。

試行錯誤した結果、Markdownとかに指定するのは無理そう....orz (そりゃそうか)
なので、HTMLを直接書き換える。

reveal.js/ って箇所をすべて file:///C:/Users/hoge/.reveal.js/ みたいに置いたとこのパスに変えてあげればよい。

スライドができた後に書き換えれば、後で reveal.js フォルダを消しても大丈夫(もう PDF 作れ)。

バッチファイルとかに置換するプログラムを書ければいいんだけどなー(後でやってみる)
PDFに変換

これはただのメモ(毎回忘れてググるので)

URLの最後に ?print-pdfと書き加えるとPDF用のレイアウトになる
ブラウザの印刷機能でPDFに変換

なんか白くて変な場合は 背景のグラフィック にチェックを入れる(Chromeの場合 ?)。

画像だけが分かれちゃった場合は画像のサイズを小さくする。

ちなみに、このときは print ってところのCSSファイルを参照するので、テーマのCSSファイルに加えた変更を 同様に加えないと元に戻っている。
おわりに

またなんかわかったら加筆しよ
おしまい