LoginSignup
1
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@YushiYamamoto(らくらくサイト 開発者)

MarkdownをHTMLに即時変換！自作エディターの作り方【JavaScriptチュートリアル】

Posted at

はじめに

マークダウンは、シンプルな記法で文章を整形できる便利なツールです。
今回は、マークダウン入力部分と 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 制作におけるフロントエンド実装の基礎を身につけ、さらなる応用開発にチャレンジしてみてください😊

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

最後に：業務委託のご相談を承ります

私は、業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用し、レスポンシブなWebサイトやインタラクティブなアプリケーション、API連携など、幅広いニーズに対応可能です。

「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、ぜひお気軽にご相談ください。一緒にビジネスの成長を目指しましょう！

👉 ポートフォリオ

🌳 らくらくサイト

1
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?