Reveal.jsのMarkdown記法で絵文字を使えるようにする

Reveal.jsってなに

Reveal.jsとは、HTMLによるプレゼンテーションを簡単につくることができるフレームワークだよ。どんな雰囲気かは公式のデモを見るのが一番だね。Qiitaにも紹介記事がいろいろあるよ（「reveal.js+Markdown」など）。
Reveal.jsの真価は、プレゼンをMarkdown記法で書けることにあると思うんだ。Markdownで書くことで、HTMLタグを頑張って打つよりも圧倒的な速さを手に入れられるよ。

絵文字を使いたい

でも。。Markdownで書くとプレゼンがシンプルになりがちで、ちょっと寂しいよね。そこで、僕は良くemoji-awesomeをつかって絵文字をいれるんだ。でも、そのためには下のようにMarkdown中にHTMLタグを打つ必要があり、爆速のMarkdownの良さを損ねてしまうよね

## Reveal.jsとは <i class="em em-heart"></i>
 * HTMLプレゼン <i class="em em-bell"></i>フレームワーク
 * Markdownが使えるよ <i class="em em-gift"></i>

理想としてはQiitaのMarkdownみたいにこんな風に書きたいよね。

## Reveal.jsとは:heart:
 * HTMLプレゼン:bell:フレームワーク
 * Markdownが使えるよ:gift:

やってみた！

そこで、QiitaのMarkdownみたいに絵文字を書けるようにしてみたよ。準備はとっても簡単だよ。Reveal.jsのインストールからやり方を書くよ。

Reveal.jsインストール

GitとNode.jsがインストール済みだと想定するよ。gitとnpmで簡単インストールだ。

$ git clone https://github.com/hakimel/reveal.js
$ cd reveal.js/
$ npm install

emoji-awesomeのインストール

絵文字を表示するライブラリは色々あると思うけど、今回はemoji-awesomeを利用してみたよ。他の絵文字ライブラリでも考え方は一緒だよ。emoji-awesomeのインストールはnpmでできるよ。

$ npm install emoji-awesome

emoji-awesomeを使うにはCSSを読み込む必要があるよ。index.htmlに下記を追記してemoji-awsomeのCSSを読み込もう。

<title>reveal.js</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css">
<!-- ★下の行を追加★ -->
<link rel="stylesheet" href="node_modules/emoji-awesome/dist/css/apple.min.css">

<!-- Theme used for syntax highlighting of code -->

emoji-awesomeの絵文字のセットはAppleやTwitter、Facebook風など計６種類のセットから選べるようだ。上の例apple.min.cssはApple風の絵文字セットで、他にはemojione.min.css、Facebook.min.css、google.min.css、messenger.min.css、twitter.min.cssがあるようだ。

markdownプラグインの修正(一行だけ）

plugin/markdown/markdown.jsに一行だけ追加するよ。現在のコードでは358行目、convertSlides()関数内の以下の場所に追記だ。

var notes = section.querySelector( 'aside.notes' );
var markdown = getMarkdownFromSlide( section );
/* ★ここから追記★ */
markdown = markdown.replace(/:([a-z0-9_-]+):/g, '<i class="em em-$1" style="font-size: 1em"></i>')
/* ここまで */
section.innerHTML = marked( markdown );

つかいかた

これでreveal.jsのMarkdown記法内で絵文字が使えるようになったよ。たとえばindex.htmlの<div class="slide">内に下記のようにかけばOKだ。

<div class="slides">
 <section data-markdown>
## 絵文字を描くよ:bulb:
 * どこでも:heart:かけるよ
 </section>
</div>

これだけで、こんなふうに表示されるよ。(テーマはsolarized.cssに変えてます)

<section data-markdown="./content.md" />のようにMarkdownを別ファイルで書いても絵文字はちゃんと反映されるよ。

何をしているか

見ての通りとても単純で、文字列(Markdown記法)をHTMLに変換する処理の直前で、文字列中の:絵文字:を <i class="em em-絵文字"></i>に変換しているよ。
絵文字変換だけのプラグインを別途つくろうかと思ったけど、markdownプラグインと処理がだいぶかぶるので、markdownプラグインに追記しちゃいました。