簡単にプレゼンテーションのスライドを作るツールはたくさんあります。
SlidebeanやDecksetを使いましたがGitHubやGitLabなどで
Markdownを使う機会が多いと普段のエディターでスライドを作りたいです。

普段のエディターはSublime TextでMarkdown Previewのパッケージを使っています。
今回はMarkdown SlideshowのパッケージでSpeaker Deckに公開する手順を紹介します。

この手順で作成したスライドを勉強会で発表しました。
発表のスライド (Changelog on Blog)

Markdown

最初にMarkdownの良いところを紹介します。

プレーンテキストとして文書を記述 --> 好きなエディターを使うことができます。
軽量で書きやすく、読みやすい --> シンプルなレイアウトなので文章に集中できます。
HTMLへと変換 --> 画像、リスト、表などの高度な表現力を利用することができます。

これらはシンプルなプレゼンテーションのスライドを作ることに向いています。

Usage

プレゼンテーションのスライドに便利な記法を紹介します。
（拡張記法はエディターにより対応していない場合があります。）

画像のサイズ変更

<img>タグのwidth属性やheight属性を設定します。

Example

画像の幅を100pxにします。

Markdown:

![original](https://octodex.github.com/images/original.png){:width="100px"}

Output:

<p><img alt="original" src="https://octodex.github.com/images/original.png" width="100px" /></p>

画像のポジション変更

style属性が使えるので、スタイルシートのテクニックを活かす事ができます。

Example

画像の位置をセンタリングします。

Markdown:

![repo](https://octodex.github.com/images/repo.png){:width="100px" style="display:block;margin-left:auto;margin-right:auto;"}

Output:

<p><img alt="repo" src="https://octodex.github.com/images/repo.png" style="display:block;margin-left:auto;margin-right:auto;" width="100px" /></p>

画像にリンク追加

![]()を[]()に含めます。[![]()]()が合体の状態です。

Example

<a>タグの左マージンを100pxに指定します。

Markdown:

[![benevocats](https://octodex.github.com/images/benevocats.png){:width="100px"}](https://octodex.github.com){:style="margin-left:100px;"}

Output:

<p><a href="https://octodex.github.com" style="margin-left:100px;">
<img alt="benevocats" src="https://octodex.github.com/images/benevocats.png" width="100px" /></a></p>

アイコンフォントのスタイルシート

class属性が使えるので、リンクしたスタイルシートを利用することができます。

Example

<a>タグの色を黒にしてリンクと下線を無効しています。OcticonsのOctocatが表示されます。

Markdown:

<link rel="stylesheet" href="http://octicons.github.com/components/octicons/octicons/octicons.css">
[ ](){:class="mega-octicon octicon-mark-github" style="color:black;text-decoration:none;border-bottom:none"}

Output:

<p><link rel="stylesheet" href="http://octicons.github.com/components/octicons/octicons/octicons.css">
<a class="mega-octicon octicon-mark-github" href="" style="color:black;text-decoration:none;border-bottom:none"> </a></p>

表示されない文字

HTMLが記述できるので、コメントが使えます。

Example

HTMLはそのまま使えるので変わりはないです。

Markdown:

<!-- I ❤ CATS -->

Output:

<!-- I ❤ CATS -->

Workflow

プレゼンテーションのスライドを作る方法を紹介します。
Markdown -> HTML -> PDF -> ... と変換します。

Write in markdown

まずは、Markdownでテキストを記述します。
スライドの区切りは----です。____で区切るとスライドの文字が小さくなります。

# タイトル

コンテンツ

<!--
  ノート
-->

----

次のコンテンツ

____

## コンテンツ文字が小さく

コンテンツ

Slideshow in browser

次に、Markdown SlideshowのパッケージでHTMLに変換します。

<slide>
  <hgroup>
    <h1>タイトル</h1>
  </hgroup>
  <article class="none">
    <p>コンテンツ</p>
    <aside class="note">
      ノート
    </aside>
  </article>
</slide>

<slide>
  <hgroup>
    <p>次のコンテンツ</p>
  </hgroup>
</slide>

<slide>
  <hgroup>
    <h2>コンテンツ文字が小さく</h2>
  </hgroup>
  <article class="smaller">
    <p>コンテンツ</p>
  </article>
</slide>

これだけでWebブラウザでプレゼンテーションができます。

スライドのテンプレートにはGoogle I/O 2012 slide templateを利用しています。
高橋メソッドにはGoogle I/O 2011 slide templateが向いています。

Sublime Textを使わない場合は、mCiderがコマンドラインに対応しています。

Export to PDF

そして、Webブラウザの機能でPDFに変換します。

Safariのプリントで方向を横向きにしています。

Upload a PDF

最後に、PDFをSpeaker Deckにアップロードします。
パブリックに公開するにはPublish this deckをチェックしましょう。

また、PDFはPowerPointに変換できるので、Keynoteにも変換できます。

MarkdownがPowerPointになるのは、何かと便利です。

Tips

Jekyll sites on GitHub Pages

GitHub Pagesはkramdownをサポートしているので紹介した拡張記法を利用することができます。

kramdownのFenced code blocksの記法は~~~ですが、Jekyllの_config.ymlに
Github Flavored Markdownを設定すると```が利用できます。

markdown: kramdown
kramdown:
  input: GFM