MarkdownをWebスライドに変換

Markdownの見出しと区切りを、ブラウザーで再生できるReveal.jsベースのスライドへ変換します。PowerPointファイルが必要な場合はPPTX変換を選んでください。

Markdown入力

113 文字

スライドプレビュー

変換後のテキスト

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ilovemdスライド</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/theme/white.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/highlight/monokai.css">
<style>
  .reveal h1, .reveal h2, .reveal h3 { text-transform: none; }
  .reveal section img { border: none; box-shadow: none; }
  .reveal pre { font-size: 0.55em; }
  .reveal blockquote {
    border-left: 4px solid #e85d3c;
    background: #fde8e2;
    padding: 0.5em 1em;
    font-style: normal;
  }
  .reveal table { font-size: 0.6em; }
  .reveal code { color: #e85d3c; }
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section><h1>プロジェクトノート</h1>
<p>読みやすい文書は、<strong>分かりやすい構造</strong>から始まります。</p>
<h2>確認すること</h2>
<ul>
<li>見出しの階層</li>
<li>正しく開くリンク</li>
<li>再利用しやすいファイル</li>
</ul>
<blockquote>
<p>ダウンロード前にプレビューを確認します。</p>
</blockquote>
</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/highlight/highlight.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/markdown/markdown.js"></script>
<script>
  Reveal.initialize({
    hash: true,
    slideNumber: 'c/t',
    transition: 'slide',
    plugins: [RevealHighlight, RevealMarkdown]
  });
</script>
</body>
</html>

ファイルはこのブラウザタブ内で処理されます。

Markdownからスライドを作る手順

一枚に情報を詰め込みすぎず、見出しと短い箇条書きで構成します。

原稿を区切る

スライドごとの見出しと本文を用意し、対応する区切り記法を入れます。

発表画面を確認

文字量、コードの行数、表の横幅、画像サイズを確認します。

HTMLを保存

Webスライドとして保存し、発表に使うブラウザーで動作を確認します。

対応内容

ブラウザーで動くプレゼンテーション

Markdownの原稿から、Webで再生しやすいスライドを作ります。

見出しをスライド化章や区切りを使って、原稿を複数の画面へ分けます。

コードとリンク技術発表で使うコードブロックやリンクをWeb表示できます。

HTMLとして持ち出し対応ブラウザーで開けるプレゼンテーションとして保存します。

活用例

Webスライドが向く発表

技術勉強会

コードを含む発表資料をMarkdownから素早く組み立てます。

オンライン共有

Web環境で閲覧できるプレゼンテーションを配布します。

資料の版管理

スライド原稿をテキストとしてGitで管理します。

次の作業へ

日本語対応のMarkdownツール

編集中のMarkdownを保ったまま、別の形式へ切り替えられます。

Markdown

27 ツール

よくある質問

MarkdownからWebスライドへの変換について

PowerPointファイルになりますか？

このページはReveal.jsベースのWebスライドです。.pptxが必要ならMarkdownからPowerPointへの変換を使ってください。

オフラインでも開けますか？

外部ライブラリや画像を参照する構成では通信が必要な場合があります。本番環境で事前に確認してください。

発表者ノートに対応しますか？

いいえ。現在のWebスライド出力は発表者ノートを生成しません。必要なノートは別に保管してください。

文書・Web

画像・プレゼンテーション

データ・公開

Markdownに変換