Softonic

Markdown をスライドに変換

ステップ 1 / 3
次へ

README を書く感覚でプレゼンテーションを作成できます。Markdown の見出し、箇条書き、コードブロックを --- の水平線でスライドに区切るだけです。ツールは Reveal.js を使ってデッキをリアルタイムでレンダリングし（テーマ：ブラック、ホワイト、シンプル、solarized）、Note: によるスピーカーノート、-- による入れ子の縦スライドに対応し、単体で動作する HTML ファイルや印刷向けの PDF にエクスポートできます。

Markdown がスライドデッキになる仕組み

  1. 1

    Markdown を書く

    `---` を使ってスライドを区切ります。標準の見出し、リスト、コードブロックはそのまま使えます。

  2. 2

    スピーカーノートを追加

    段落の先頭に `Note:` を付けます。プレゼンターモードでのみ表示されます。

  3. 3

    デッキをプレビュー

    ライブプレビューで、矢印キーで操作できるデッキを表示します。

  4. 4

    テーマを選ぶ

    ブラック、ホワイト、league、sky、シンプル、solarized：どの Reveal.js テーマでも使えます。

  5. 5

    エクスポート

    単体で動作する HTML ファイル、またはブラウザ印刷による PDF。

スライドの構文

# 冒頭のスライド

サブタイトルのテキスト

---

## 2 枚目のスライド

- 箇条書き 1
- 箇条書き 2
- 箇条書き 3

Note: これはプレゼンターモードでのみ表示されるスピーカーノートです。

---

## コードのスライド

\`\`\`python
def hello(name):
    return f"Hi {name}"
\`\`\`
  • ---（単独の行に 3 つのハイフン）は新しい横方向のスライドを開始します。
  • --（2 つのハイフン）は現在のスライド列の中に縦方向のスライドを開始します。下向き矢印キーを押すと下へ移動できます。
  • 段落の先頭にある Note: はスピーカーノートになります。

キーボード操作

キー 操作
右／スペース 次のスライド
左 前のスライド
下／上 縦方向のスタックを移動
s スピーカービューを開く
o スライド一覧
f 全画面表示
? ヘルプダイアログ

レイアウトの工夫

  • 2 列レイアウト： スライド内で生の HTML を使います、<div class="columns">...</div>。
  • フラグメント表示： Reveal.js を直接使う場合、箇条書きは {.fragment} 属性で 1 つずつアニメーション表示されます。必要に応じて生の HTML として追加してください。
  • 背景画像： スライドレベルの属性 <!-- .slide: data-background="url" --> で全面背景を設定します。
  • スライド間の自動アニメーション： Reveal 4 は一致する要素間の滑らかなトランジションに対応します。テーマ設定で有効にしてください。

PDF へのエクスポート

ライブプレビューから、ブラウザの URL で ?print-pdf を開き、ブラウザの印刷ダイアログを使います。A4 横向き、背景グラフィックを有効、余白を最小に設定してください。Reveal.js は 1 ページに 1 枚のスライドを出力し、任意で追加ページにスピーカーノートを表示します。

Markdown ベースのスライドが活きる場面

  • コード例が多い技術トーク。
  • レイアウトが二の次で、内容を優先するデッキ。
  • ドキュメントをそのままスライドに、プレゼンをプロジェクトの README と並べて git で管理。
  • バージョン管理された研修資料。

向いていない場面

  • 画像配置を精密に決めるデザイン重視の基調講演。
  • 複雑なアニメーションや埋め込み動画のタイミングを要するスライド。
  • テンプレートが細部まで規定する、ブランド管理されたデッキ。

よくある質問

はい。通常の Markdown 画像構文が使えます。エクスポートした HTML から参照できるよう、絶対 URL を使うか、先に画像をアップロードしてください。

はい、任意で保持できます。Reveal の印刷モードは「ノートを別ページに」に対応しており、各スライドが 2 つの PDF ページになります。1 つはスライド、もう 1 つはノートです。

いいえ。レンダリングはブラウザ内でローカルに行われます。Markdown のソースもエクスポートした HTML も、お使いの端末から外部へ送信されることはありません。

はい。Markdown の先頭に <style> ブロックを追加するか、テーマ設定で外部スタイルシートをリンクしてください。Reveal.js の出力に挿入されます。

エクスポートした HTML は単体で動作するファイルで、GitHub Pages、Netlify、S3 など任意の静的ホストで動きます。HTML をアップロードすれば完了です。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

JavaScript圧縮ツール

変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。

EditorConfig ジェネレーター

インデントのスタイルとサイズ、改行コード、文字コード、空白ルールを指定して .editorconfig ファイルを生成し、IDE やエディタをまたいで書式を統一できます。

メールアドレス検証ツール

メールアドレスを検証します。RFC 5322構文チェック、MXレコードのライブ確認に加え、ローカル部、ドメイン、長さの詳細を表示します。メールは送信されません。

このツールは他の言語でも利用できます