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風など計6種類のセットから選べるようだ。上の例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プラグインに追記しちゃいました。
Author And Source
この問題について(Reveal.jsのMarkdown記法で絵文字を使えるようにする), 我々は、より多くの情報をここで見つけました https://qiita.com/vimyum/items/3de00082d96a4a1e3327著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .