マークダウンエディタ | リアルタイムプレビュー付きウェブベースのマークダウンエディタ

はじめに

このプロジェクトでは、入力中にリアルタイムで HTML プレビューを提供するシンプルなウェブベースの Markdown エディタを作成します。Ace Editor、marked、およびhighlight.jsのようなライブラリを使用して、Markdown での記述だけでなく、ブラウザセッション間でデータを保存し、プレビューでコードスニペットを強調表示する直感的なエディタを開発します。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下を学びます。

エディタとビューアの HTML 構造を設定する方法
快適なユーザーエクスペリエンスのためにエディタとビューアをスタイリッシュにする方法
エディタの初期化ロジックを実装する方法
Markdown を HTML にパースし、ビューアに表示する方法
エディタとビューアの間のスクロール同期を実装する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

リアルタイム HTML プレビュー付きのウェブベースの Markdown エディタを開発する
Ace Editor、marked、およびhighlight.jsのようなライブラリを使用して、エディタの機能を強化する
ブラウザセッション間でデータ永続化を実装する
Markdown プレビューにコード構文強調表示を提供する

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") javascript/ToolsandEnvironmentGroup -.-> javascript/web_storage("Web Storage") subgraph Lab Skills javascript/functions -.-> lab-445690{{"リアルタイムプレビュー付きマークダウンエディタを開発する"}} javascript/dom_select -.-> lab-445690{{"リアルタイムプレビュー付きマークダウンエディタを開発する"}} javascript/dom_manip -.-> lab-445690{{"リアルタイムプレビュー付きマークダウンエディタを開発する"}} javascript/event_handle -.-> lab-445690{{"リアルタイムプレビュー付きマークダウンエディタを開発する"}} javascript/dom_traverse -.-> lab-445690{{"リアルタイムプレビュー付きマークダウンエディタを開発する"}} javascript/web_storage -.-> lab-445690{{"リアルタイムプレビュー付きマークダウンエディタを開発する"}} end

HTML 構造を設定する

要件：

基本的な HTML タグに慣れていること。

機能：

エディタとビューアの基礎を築く。

index.html で、エディタとビューアの基本的な HTML 構造を設定します。エディタとプレビューペインの両方用のスペースを用意します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>markdown editor</title>

    <!-- CSS ファイルをインポート -->
    <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="libs/highlightjs/default.min.css" />
    <link rel="stylesheet" href="libs/highlightjs/monokai_sublime.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <!-- markdown エディタ用の div -->
        <div class="col-md-6" id="md-editor"></div>
        <!-- markdown プレビューボックス用の div -->
        <div class="col-md-6" id="md-viewer"></div>
      </div>
    </div>
    <!-- JavaScript ファイルをインポート -->
    <script src="libs/jquery.min.js"></script>
    <script src="libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="libs/ace/ace.js"></script>
    <script src="libs/marked.min.js"></script>
    <script src="libs/highlightjs/highlight.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

✨ 解答を確認して練習

エディタとビューアをスタイリッシュにする

要件：

基本的な CSS の知識。

機能：

快適なユーザーエクスペリエンスのためにエディタとビューアをスタイリッシュにする。

提供されたスタイルを style.css に挿入します。これにより、エディタとビューアの両方が正しくスタイリッシュになり、それぞれ画面の半分を占めるようになります。

/* style.css */

/* 編集エリア */
#md-editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 16px;
}

/* プレビューエリア */
#md-viewer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  overflow-y: scroll;
}

この CSS により、エディタとビューアはそれぞれ画面の半分を占め、横並びに配置されます。

✨ 解答を確認して練習

エディタの初期化を実装する

要件：

JavaScript の基本的な理解。

機能：

必要な設定で Ace Editor をセットアップする。

main.js をエディタの初期化ロジックで起動します。

/* main.js */

/**
 * エディタを初期化する
 *
 */
function initEditor() {
  // エディタを初期化する
  var editor = ace.edit("md-editor");

  editor.setTheme("ace/theme/monokai"); // テーマスタイルを設定する
  editor.getSession().setMode("ace/mode/markdown"); // エディタモードを設定する
  editor.getSession().setTabSize(4); // タブを 4 つのスペースに設定する
  editor.getSession().setUseWrapMode(true); // 折り返しを有効にする

  // ローカルストレージからデータを読み込む
  editor.setValue(localStorage.localData || "");
}

✨ 解答を確認して練習

Markdown の解析を実装する

要件：

JavaScript と jQuery に慣れていること。

機能：

Markdown を HTML に変換する。
ビューアに HTML を表示する。

/**
 * Markdown を解析する
 *
 * @params {object} editor - エディタインスタンス
 * @return {object} - プレビューボックス
 */
function parseMarkdown(editor) {
  var viewer = $("#md-viewer"); // ドキュメントプレビューボックス
  var data = editor.getValue(); // エディタのデータを取得する

  // データをローカルストレージに保存する
  localStorage.localData = data;
  // Markdown を解析する
  data = marked(data);
  viewer.html(data);

  // Markdown ドキュメント内のコードを強調表示する
  $("pre > code", viewer).each(function () {
    hljs.highlightBlock(this);
  });

  // ビューアを返す
  return viewer;
}

✨ 解答を確認して練習

エディタとビューアのスクロール同期

要件：

JavaScript イベントの理解。

機能：

エディタとビューアのスクロールを同期する。

/*
 * スクロールバーを制御する
 * エディタとプレビューボックスの間でスクロールを同期する
 *
 * @params {object} editor - エディタインスタンス
 * @params {object} viewer - プレビューボックス
 */
function fixScrollBar(editor, viewer) {
  var session = editor.getSession();

  // デフォルトで最初の行にスクロールする
  session.setScrollTop(0);

  // エディタにスクロールイベントをバインドする
  session.on("changeScrollTop", function () {
    var sTop = session.getScrollTop();
    // プレビューボックスのスクロールバーを設定する
    viewer.scrollTop(sTop);
  });

  // プレビューボックスにスクロールイベントを設定する
  viewer.on("scroll", function () {
    var sTop = viewer.scrollTop();
    // エディタのスクロールバーを設定する
    session.setScrollTop(sTop);
  });
}

✨ 解答を確認して練習

すべての機能を統合してエディタを初期化する

要件：

JavaScript における関数呼び出しの理解。

機能：

以前のすべての手順を統一されたコードにまとめる。
エディタを初期化してすべての機能を適用する。

/* main.js */

initEditor();

/**
 * エディタを初期化する
 *
 */
function initEditor() {
  // エディタを初期化する
  var editor = ace.edit("md-editor");

  editor.setTheme("ace/theme/monokai"); // テーマスタイルを設定する
  editor.getSession().setMode("ace/mode/markdown"); // エディタモードを設定する
  editor.getSession().setTabSize(4); // タブを 4 つのスペースに設定する
  editor.getSession().setUseWrapMode(true); // 折り返しを有効にする

  // ローカルストレージからデータを読み込む
  editor.setValue(localStorage.localData || "");

  // ローカルストレージから読み込んだデータを解析する
  var viewer = parseMarkdown(editor);
  // スクロールバーを制御する
  fixScrollBar(editor, viewer);

  // リアルタイムの Markdown 解析
  editor.getSession().on("change", function (e) {
    parseMarkdown(editor);
  });
}

✨ 解答を確認して練習

プロジェクトの実行

ウェブブラウザで index.html を開く。
マークダウンエディタを表示してテストする。
ページの表示は以下の通りである。

✨ 解答を確認して練習

まとめ

おめでとうございます！あなたはついに、リアルタイムプレビュー機能付きのウェブベースのマークダウンエディタを作成しました。これで、マークダウンコンテンツを書き、そのリアルタイムの HTML 表現を見ることができ、コードスニペットもハイライトすることができます。忘れないでください。localStorage のおかげで、書いたコンテンツはブラウザセッション全体にわたって保存されます。楽しいコーディングを！