ブログズミ: reveal.js + Markdown のちょっとしたメモ

2014年9月29日月曜日

reveal.js + Markdown でスライドを書くことが多いので、それ関係でちょっとしたことを備忘録として残しておく。

表題が大文字に変換されてしまうのが嫌だったので対処してみました。

## Sample

これは sample です。

例えば上記の場合、デフォルト設定では以下のように表示されます。

これは、theme の css で表題のスタイルに text-transform: uppercase; があるためです。
これを無効にすれば良いので、theme css の指定の後に以下の記述を追記します。

<style type="text/css">
  .reveal h1,
  .reveal h2,
  .reveal h3,
  .reveal h4,
  .reveal h5,
  .reveal h6 {
    text-transform: none;
  }
</style>

これで大文字ではなく、書いたとおりに表示されます。

## Sample

これは sample です。__
<!-- -->__
↑空行を入れたい。__

※わかりやすいようにスペースを "_" で表記してます。

改行をする場合、末尾にスペースを２つ入れるのですが、前方になんらかの文字が必要です。
なので、コメント + スペースとすることで空行を出力しています。

こちらは以前にもブログに書きました。 Markdown でテキストカラーの変更
Markdown の記述中に html タグを含めてもなんら問題ありません。そのまま html に出力されます。
なので、Markdown で表現できないことも html で表現すれば OK です。

## テスト

タグを<span style="color:red">直接記述</span>することで<span style="color:blue">色</span>を変えます。

書いたスライドを公開するときは github pages が便利です。
github pages については割愛します。

GitHub Pagesホスティングサービス（ほぼ）完全活用ガイド | ゆっくりと…

手順としてはとっても簡単で、gh-pages ブランチを作って push するだけです。
例）
github: https://github.com/srz-zumix/slide
github pages: http://srz-zumix.github.io/slide/iuwandbox/#/

今回は以上です。
今後も reveal.js + Markdown でスライドを書くと思うので、また何かあったらブログに書こうと思います。

ブログズミ