アルム＝バンド reveal.js がいつの間にやら大きく変わっていたので再入門してみました。
準備
> git clone https://github.com/hakimel/reveal.js.git
> cd reveal.jsサクッと試すにはプロジェクトを丸ごとクローンしてくるのが良さそうです。
hoge.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unveil for Markdown</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/white.css" id="theme">
<!-- Theme used for syntax highlighted code -->
<link rel="stylesheet" href="plugin/highlight/monokai.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section
data-separator="^\n---\n$"
data-separator-vertical="^\n--\n$"
data-markdown="./hogera.md"
>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script src="plugin/math/math.js"></script>
<script>
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealMath.KaTeX ]
});
</script>
</body>
</html>hogera.md
# テストスライド
---
## 見出し1
- hoge
- piyo
- fuga
---
## 見出し2
1. hogera
2. hogehoge
3. hogepiyo
---
## 見出し3
---
## 見出し4
いろはにほへとちりぬるを
---
## External 3.3 (Image)
---
## External 3.4 (Math)
`\[ J(\theta_0,\theta_1) = \sum_{i=0} \]`Markdown で書きたいので examples/markdown.html やMarkdown | reveal.js辺りを参考にして HTML と Markdown ファイルを用意。
実行
> yarn
> yarn start準備できたところでパッケージインストール & 実行。
Gulp で起動したところで http://localhost:8000/hoge.html にアクセスすればOK。
PDFへのエクスポートは URL に ?print-pdf を付けてアクセスした状態で、ブラウザの印刷→PDFで保存、でOKとのこと。
URL はページャーの都合で http://localhost:8000/tmp.html?print-pdf#/ のような形になりますが問題なし。
所感
以前は自前で Gulp 等の環境をラッパーとして用意していましたが、単独で済むようになったのでかなり楽になった、と感じました。
メンテナンスもスライドのコンテンツのみで済みますし。
また、試してはいませんがデザインのカスタマイズは css/theme/ 下の scssファイル を編集していけば良さそうです。これも自前で用意していたのに……随分と至れり尽くせりになってしまって……。