はじめに

マークダウンは、シンプルな記法で文章を整形できる便利なツールです。
今回は、マークダウン入力部分と HTML プレビュー部分を持つエディターを作成し、入力に合わせて即座に変換結果を表示するリアルタイムマークダウンエディターを作ってみます🚀。
このチュートリアルを通して、HTML、CSS、JavaScript の基本を実践的に学びながら、実装例を具体的に把握できる内容となっています。

See the Pen Markdown Editor by Yushi Yamamoto (@yamamotoyushi) on CodePen.

必要な技術とライブラリ

HTML
Webページの基本構造を作成します。
CSS
エディターの見た目を整え、レスポンシブなデザインを実現します。
JavaScript
ユーザー入力に応じて、マークダウンを HTML にリアルタイム変換するロジックを実装します。
Showdown
軽量なマークダウン変換ライブラリ。
CDN から簡単に読み込むことができます。

1. HTML 構造の作成

まずは、エディターの基本となる HTML の構造を作成します。
以下のサンプルコードでは、textarea を使ってマークダウン入力エリアを、div 要素で変換後の HTML プレビューを表示しています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown Editor</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="editor">
            <textarea id="markdown-input" placeholder="Type Markdown here..."></textarea>
        </div>
        <div class="preview" id="html-preview"></div>
        <div class="controls">
            <button id="download-btn">Download as HTML</button>
            <label for="dark-mode-toggle">
                <input type="checkbox" id="dark-mode-toggle"> Dark Mode
            </label>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS で基本のスタイルを整える

次に、エディターのレイアウトやスタイルの基本を CSS で定義します。
シンプルで見やすいデザインに加え、レスポンシブ対応（モバイルでも利用可能）にしています。

/* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  display: flex;
  width: 90%;
  max-width: 1200px;
  height: 80vh;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.editor, .preview {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.editor textarea {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  line-height: 1.5;
  resize: none;
}

.preview {
  border-left: 1px solid #ccc;
}

.controls {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}

#download-btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

#dark-mode-toggle {
  margin-left: 5px;
}

/* ダークモード用のスタイル */
.dark-mode {
  background-color: #333;
  color: #fff;
}

.dark-mode .editor textarea,
.dark-mode .preview {
  background-color: #444;
  color: #fff;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    height: auto;
  }
  .editor, .preview {
    height: 50vh;
  }
}

3. JavaScript で機能実装

JavaScript で、ユーザーがエディターに入力するたびにマークダウンを HTML に変換し、プレビュー欄に表示するロジックを実装します。
また、HTML のダウンロード機能・ダークモード切替機能もご紹介します。

// script.js
document.addEventListener('DOMContentLoaded', () => {
  const markdownInput = document.getElementById('markdown-input');
  const htmlPreview = document.getElementById('html-preview');
  const downloadBtn = document.getElementById('download-btn');
  const darkModeToggle = document.getElementById('dark-mode-toggle');

  // Showdown コンバータの初期化
  const converter = new showdown.Converter();

  // マークダウンを HTML に変換する関数
  function convertMarkdownToHtml(markdown) {
    return converter.makeHtml(markdown);
  }

  // プレビューを更新する処理
  function updatePreview() {
    const markdown = markdownInput.value;
    const html = convertMarkdownToHtml(markdown);
    htmlPreview.innerHTML = html;
  }

  // 入力エリアでの変更を監視
  markdownInput.addEventListener('input', updatePreview);

  // HTML として保存する処理
  downloadBtn.addEventListener('click', () => {
    const markdown = markdownInput.value;
    const html = convertMarkdownToHtml(markdown);
    const blob = new Blob([html], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'output.html';
    a.click();
  });

  // ダークモードの切り替え処理
  darkModeToggle.addEventListener('change', () => {
    document.body.classList.toggle('dark-mode');
  });

  // 初期表示時のプレビュー更新
  updatePreview();
});

4. Showdown ライブラリの導入

本エディターでは、Showdown ライブラリを利用してマークダウンを HTML に変換しています。
CDN を利用するだけで簡単に導入でき、設定もシンプルです。
最新のバージョンは jsDelivr の CDN から入手可能です。

5. 追加機能の実装 ✨

ダウンロードボタン

ユーザーが作成した HTML をファイルとしてダウンロードできるようにする機能です。
上記の JavaScript コード内でも実装している通り、Blob オブジェクトを利用して実現します。

ダークモード

夜間や目に優しい表示を実現するために、簡単なチェックボックスで画面全体のテーマを切り替える機能を追加しています。
CSS と JavaScript のクラス操作で柔軟にスタイルを変更できるようになっています😎。

シンプルなフローチャートで理解する全体の流れ

上記のフローチャートは、エディターがどのようにして入力を受け取り処理し、結果を反映しているかの流れを簡潔に示しています。

まとめ

今回のチュートリアルでは、基本的な HTML、CSS、JavaScript の知識を用いて、リアルタイムでマークダウンを HTML に変換するエディターを実装する方法を解説しました。
具体的なコード例とシンプルな図、さらには追加機能の実装も紹介し、プログラマーやエンジニア初心者にも実装イメージがしっかりと伝わる内容になっています。
このプロジェクトを通じて、Web 制作におけるフロントエンド実装の基礎を身につけ、さらなる応用開発にチャレンジしてみてください😊

以上、マークダウンエディターの作り方の解説でした。ぜひ実装して、自分だけのエディターを作ってみましょう！