PandocでReveal.js version 4を使う

Live With Linux::software

TOP
Articles
Live With Linux
PandocでReveal.js version 4を使う

序

Reveal.jsはversion. 4で従来とは非常に大きく変わり、ブラウザで完結しなくなったため非常に扱いづらくなった。要はbabelやらgulpやらを使いたいがためにNodeべったりに変わったのだが、従来CSSをちょっといじるだけだったのが、かなり深く理解しないと触れないようになった。

加えて、Pandocがそのような「webサーバーを立てて使う」Reveal.jsに当然ながら対応していなかったため、PandocでReveal.js 4が使えない時期があった。

現在は使えるようになっており、Pandocにも記載がある。

ここでは、PandocでカスタムテーマのReveal.jsを使う話をしていこうと思う。

Pandocで単独ファイルプレゼンテーション

従来と近いと言えば近い。

pandoc -s --self-contained -t revealjs foo.md -o foo.html

大きな違いとして、従来はカレントディレクトリ上にreveal.jsディレクトリを必要としたが、それが必要なくなった。どういう仕組みかというと、Reveal公式のファイルを読みにいくドキュメントを生成し、--self-containedした場合はそこから取ってきて組み込む。

なので、これだとカスタムはできない。

基本的にReveal.jsはカスタムできないと日本語ではあまり使えない。

というのも、日本語のブラウザの折返しはコントロールできないと言ってよく、バックスラッシュを使って強制改行しようにも、Reveal.jsは非常に狭いところで折り返すので、タイトルがほとんど書けないのだ。ちなみに、FHD x1.0環境でだいたい6文字で折り返される。

Reveal.jsの基本を確認

まずはReveal.jsを落とす。

git clone 'git://github.com/hakimel/reveal.js.git'

ディレクトリに入り、npm installしてからnpm start

cd reveal.js
npm install
npm start

これでhttp://localhost:8000/でReveal.jsが読めるようになる。

Reveal.jsのカスタマイズ

ブランチを切ろう。

git checkout -b rukemod

SCSSファイルをコピーし、編集。

cd css/theme
cp league.scss rucolor.scss
vim rucolor.scss

とりあえずこんな感じ。

/**
 * Harukamy's customized theme. based on League official theme.
 * Copyright (C) 2021 Masaki Haruka
 */


// Default mixins and settings -----------------
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------

// Override theme settings (see ../template/settings.scss)
$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2);
$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);

// Background generator
@mixin bodyBackground() {
    @include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) );
}

// Change text colors against light slide backgrounds
@include light-bg-text-color(#222);

// RUKA's configuration.
$mainFontSize: 30px;
$mainFont: 'Mplus 2', 'GenEi Gothic N', 'Source Han Sans JP', 'Noto Sans JP', sans-serif;
$headingFont: 'DFGabiMincho-W7', sans-serif;
$heading1Size: 2.65em;
$heading2Size: 2.10em;
$heading3Size: 1.65em;
$heading4Size: 1.20em;

// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

少なくとも新しくファイルを作ったときはビルドする必要がある。

npm run build -- css-themes

OK、スタートしよう

npm start

Pandocのほうでは昔からあるrevealjs-urlを使う。これはReveal側にあるものだ。

pandoc -s --self-contained -t revealjs -V theme=rucolor -V revealjs-url=http://localhost:8000/ foo.md -o foo.html

サーバーを走らせた状態でファイルを更新するとサーバーとしては即時更新される。しかし、--self-containedしているとファイルのほうはその更新を反映しないので、再度Pandocを走らせて生成する必要がある。

カスタマイズ版は公開中

Reveal.jsからforkする形でカスタムテーマを導入したものをGitHubに上げている。

rukamodJPブランチで日本語における不都合を解消したテーマを追加しており、これは実際に私がプレゼンテーションで使うごとに随時アップデートする予定なので、利用してもらえればと思う。