ブラウザでサクッと使えるMarkdownエディタ
README.mdとかを手軽に書くために、ブラウザだけで動作する、シンプルかつ高機能な2分割表示のMarkdownエディタを作りました。
標準的なMarkdownプレビューに加え、マークダウン文章作成で面倒（だと私は思う）な改行処理を自動化する整形機能を搭載しています。
githubにあります。
ソース：https://github.com/ryjkmr/simple_markdown_editor_with_preview
アプリ：https://ryjkmr.github.io/simple_markdown_editor_with_preview
特徴
- 2分割リアルタイムプレビュー: 左側で編集、右側で即座に結果を確認。
- スマート改行整形ボタン:
Markdownの仕様である「行末のスペース2個」を自動付与。
見出し、リスト、コードブロックなどのMarkdown構文を判別し、構造を壊さずに文章部分のみを整形します。 - チートシート内蔵：構文を忘れても左側のサイドバーですぐに確認可能。
- インストール不要：HTMLファイル1つで完結しているため、ブラウザで開くだけで使用できます。
- カスタマイズ性：CSS変数（:root）を使用しており、色やサイズを簡単に変更可能。
- コピー＆ダウンロード機能（localhost/HTTPS接続時のみ）
使い方
- index.html（または作成したファイル名）をブラウザにドラッグ＆ドロップします。
- コピーやダウンロード機能を使いたい場合はlocalhostもしくはHTTPSサーバーから開いてください。github pagesでも可。
- 左側のエディタにMarkdownを記述します。
- 日本語の文章を書き終えたら、左下の 「改行をMarkdown用に変換」 ボタンを押すと、プレビュー通りの改行が維持されるよう整形されます。
- Markdownテキストをコピペやダウンロードして使用します。
整形の仕様
マークダウンでの文書作成の面倒臭さに、単純な改行無視される点があると思います。
このエディタの「改行整形」は、単純な改行をマークダウン記法の改行（スペース2個＋改行）に変換します。
その際、以下の行をスキップするように設計されています。
- "#" で始まる見出し行
- "-", "*", "+" で始まるリスト行
- "1."などの番号付きリスト行
- ">"で始まる引用行
- " ``` "で囲まれたコードブロック内
- すでに末尾にスペースが2個ある行
カスタマイズ
CSSの先頭にある以下の変数を書き換えることで、自分好みのテーマに変更できます。
そのほか見た目や機能を変更したければ、ソースをAIに投げてアドバイスを貰ってください。
CSS
:root {
--bg-color: #f5f5f5; /* 全体の背景色 */
--editor-bg: #ffffff; /* エディタの背景色 */
--accent-color: #007aff; /* ボタンなどのアクセントカラー */
--sidebar-width: 220px; /* サイドバーの幅 */
}使用ライブラリ
marked.js - Markdown Parsing