Markdown Editor

Markdown Editor

左側で Markdown を書き、右側でライブプレビュー。よく使う書式はすべてツールバーに。完全にクライアントサイドで動作し、内容はブラウザの外に出ません。

いいえ。Markdown の解析はすべてブラウザ内で marked ライブラリを使って行われます(出力は DOMPurify で XSS を防ぐためにサニタイズされます)。内容が送信・記録・保存されることはありません。

CommonMark + GitHub Flavored Markdown (GFM):表、タスクリスト ([x]、[ ])、取り消し線 (~~)、自動リンク、言語タグ付きフェンスドコードブロックで構文ハイライト。

エディタ 0 単語 · 0 文字
プレビュー

なぜ Markdown Editor?

クリーン、高速、ライブ — よく使われる Markdown 拡張をすべて内蔵。

ライブプレビュー

入力と同時に HTML が更新され、コードブロックは構文ハイライト、GitHub Flavored Markdown に対応。

分割または全画面表示

分割画面(エディタ+プレビュー)、エディタのみ、プレビューのみを選択可能。モバイルでは自動的にレイアウトが調整されます。

プライバシー重視設計

すべての Markdown 解析はブラウザ内で完結。内容はサーバーに送信も保存もされません。

ツールバーとショートカット

見出し、太字、斜体、コード、リンク、引用、リスト、表、チェックボックスをワンクリックで。キーボードショートカット:Ctrl/⌘+B、I、K。

GitHub Flavored Markdown

表、タスクリスト、取り消し線、フェンスドコードブロック、190 以上の言語を自動判定する構文ハイライトに対応。

コピーとダウンロード

Markdown ソースまたはレンダリングされた HTML をクリップボードにコピーするか.md ファイルとしてダウンロード。

Markdown エディタの仕組み

左で編集、右で HTML を確認 — 即座に、ローカルで。

  1. 1

    Markdown を入力または貼り付け

    左ペインはプレーンな textarea です。既存の .md ファイルを貼り付けるか、新しく書き始めます。標準的なキーボードショートカット(⌘ B で太字、⌘ I で斜体)が利用でき、見出し、リスト、リンク、コードブロック、テーブル用のツールバーも備えています。

  2. 2

    Marked.js が HTML にレンダリング

    キー入力ごとに、入力を実績ある CommonMark + GitHub Flavored Markdown パーサーである marked に通します。GFM 機能 — タスクリスト、テーブル、取り消し線、自動リンク — もすべて動作します。出力は DOMPurify でサニタイズされ、埋め込まれたスクリプトは除去されます。

  3. 3

    シンタックスハイライト付きプレビュー

    レンダリングされた HTML 内のコードブロックは、約 190 言語に対応した highlight.js でハイライトされます。プレビューペインはエディタとスクロール同期するため、編集中のセクションのレンダリング結果がそのまま見えます。

  4. 4

    コピーまたはダウンロード

    生の Markdown、レンダリング済み HTML、または単一の自己完結型画像(html-to-image による PNG)として書き出せます。3 つの出力すべてがブラウザ内で生成されます — 下書きテキストがサーバーに触れることはありません。

どのような用途で使われているか

ブラウザ完結型エディタが活きる実際のワークフロー。

README ファイルの下書き

エディタを開いてプロジェクトの説明を貼り付ければ、push 前に GitHub での README のレンダリング結果を正確に確認できます。プレビューのためだけに commit と revert を繰り返す必要はありません。

ブログ記事の執筆

ライブプレビューを使いながら執筆することで、壊れた Markdown — 閉じ忘れた括弧、不正なテーブル、レベルが飛んだ見出し — をすぐに検出できます。「公開、レンダリング崩れの確認、修正、再公開」という往復作業を省けます。

オフラインでのメモ

ページの読み込み後は、飛行機内や社内ファイアウォール内でもエディタが動作します。下書きはブラウザのタブに保持されているため、移動前にきちんと閉じるか、コピーして退避してください。

Markdown からきれいな HTML への変換

長文の Markdown ドキュメントをドロップし、レンダリング済みの HTML をコピーして CMS に貼り付けます。フォーマットを予測不能に削ぎ落とす CMS のネイティブ Markdown インポーターより、しばしばクリーンな仕上がりになります。

下書きにプライバシーが必要な理由

下書きには、未整理の思考、社内向けの製品名、顧客フィードバック、NDA 対象の素材が含まれていることがよくあります。クラウドへ自動保存するオンラインエディタは、すべてのキー入力をひそかにサーバーログに変えてしまいます。iKit の Markdown エディタにはそもそも保存エンドポイントすら存在しません — 下書きはブラウザのタブの中だけに存在します。

  • サーバーへの自動保存なし、サイドの下書き履歴も保持していません。
  • レンダリングはキー入力ごとにローカルで実行 — デバウンスされた API 呼び出しもありません。
  • 画像埋め込みは、貼り付けた Data URI または外部 URL のままです — こちらでプロキシすることはありません。

関連ガイド

iKit ブログの詳しいチュートリアルとツール比較。

よくある質問

入力内容はサーバーに送信されますか?

いいえ。Markdown の解析はすべてブラウザ内で marked ライブラリを使って行われます(出力は DOMPurify で XSS を防ぐためにサニタイズされます)。内容が送信・記録・保存されることはありません。

対応している Markdown の方言は?

CommonMark + GitHub Flavored Markdown (GFM):表、タスクリスト ([x]、[ ])、取り消し線 (~~)、自動リンク、言語タグ付きフェンスドコードブロックで構文ハイライト。

ファイルは保存されますか?

いいえ。本ツールは自動保存しません。ダウンロードボタンで文書を.md ファイルとして保存してください。サーバーには何も保存されないため、ページを更新すると作業内容は消えます。

利用できるキーボードショートカットは?

Ctrl/⌘+B で太字、Ctrl/⌘+I で斜体、Ctrl/⌘+K でリンク。Tab はスペース 4 つを挿入(または選択行をインデント)、Shift+Tab でアウトデント。

画像を貼り付けたりドロップしたりできますか?

現在はツールバーから画像構文(![alt](url))を挿入できます。画像の直接貼り付け/ドロップ対応は実装していません。画像をどこかに保存する必要があり、プライバシー優先の設計に反するためです。