LoginSignup
11
6

More than 5 years have passed since last update.

Pandocでreveal.jsを使ったスライドを作成

Last updated at Posted at 2016-08-01

準備

Pandoc

さまざまなマークアップ言語を別の形式に変換できるツール。

Pandocのインストール

公式サイトからインストーラーをダウンロード。
Windowsの場合、先頭にリンクがある。
pdfの場合はこっちもダウンロードする、と書いてあるのはひとまずおいておく。

LuaLaTex

PDFで出力したい場合必要になる。
Tex Live 2014/2015のisoをこのあたりからダウンロードしてインストール。

reveal.js

githubから最新版をダウンロード。
pandocが 1.13.2 の場合は参照が失敗するので以下のように修正。

  • reveal.js/js/reveal.jsreveal.min.js にリネーム。
  • reveal.js/css/reveal.cssreveal.min.css にリネーム。

作成

環境

Pandoc 1.13.2
reveal.js 3.0.0

実装

utf8で記述する。

input.md
% タイトル
% 名前
% 日付

# 大項目

----

### サブページ1

- リスト
- リスト
- リスト

----

### サブページ2

1. 番号付き項目
1. 番号付き項目
1. 番号付き項目

# ページ2

----

あめんぼあかいなあいうえお <br>
となりの客はよく柿食う客だ <br>
赤パジャマ黄パジャマ茶パジャマ <br>
あめんぼあかいなあいうえお <br>
となりの客はよく柿食う客だ <br>
赤パジャマ黄パジャマ茶パジャマ <br>
あめんぼあかいなあいうえお <br>
となりの客はよく柿食う客だ <br>
赤パジャマ黄パジャマ茶パジャマ <br>

----

![キャプション](img/image.jpg)

スライド区切り

input.md

# 大項目

----

---- でスライド区切り。
#### でもスライドを区切れるが、明示的に----で指定したほうが目的のレイアウトになりやすい。

リスト

input.md

- リスト
- リスト
- リスト

1. 番号付き項目
1. 番号付き項目
1. 番号付き項目

- でリスト、 1. で番号付きリスト。
全て 1. と記述しても、出力すると 1.2.3 のように表示される。

ベタ書き

input.md

----

あめんぼあかいなあいうえお <br>
となりの客はよく柿食う客だ <br>
赤パジャマ黄パジャマ茶パジャマ <br>
あめんぼあかいなあいうえお <br>
となりの客はよく柿食う客だ <br>
赤パジャマ黄パジャマ茶パジャマ <br>
あめんぼあかいなあいうえお <br>
となりの客はよく柿食う客だ <br>
赤パジャマ黄パジャマ茶パジャマ <br>

<br>を抜くと改行せずに文字が並ぶので明示的に改行を指定。
行末に半角スペースを2つ入れることでも改行できる。
# や ### の段落指定がなくても ---- でスライドを区切れば1スライドとして表示される。
## ではなく ### としているのは文字の大きさの調整のため。

画像

input.md

![キャプション](img/image.jpg)

画像の表示。相対パスで指定。

変換

pandoc -s -t revealjs -o slide.html input.md --slide-level=2

-s
スタンドアローンのオプション。
-t
変換対称。今回はプレゼンテーションにしたいので"revealjs"。
-o
出力。今回は slide.html。
--slide-level=2
2次元のスライドの指定。

実行

配置

├─ input.md
├─ slide.html
│
├─img
│  └─ image.jpg
│
└─reveal.js

slide.html

slide.png

参考

Pandocでreveal.jsを利用したプレゼンテーションスライドを作成する
markdownの原稿を、pandocを使って、Texのbeamerを利用して、プレゼンスライドPDFに変換

11
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
6