Markdownエディターとは?

分割ペインのエディターで、HTMLプレビューが即座に表示されます。GitHub Flavored Markdownに対応:テーブル、タスクリスト、シンタックスハイライト付きコードブロック。HTMLとしてエクスポート、またはレンダリング結果をコピーできます。

レンダリングは GitHub 風の Markdown パーサーを使用し、言語ヒント付きのフェンスドコードブロック(javascript、python、css など)、チェックボックス状態のタスクリスト、パイプテーブル、脚注、取り消し線をサポートします。ツールバーは見出し、太字、斜体、リンク、画像、コード、テーブルの記法をカーソル位置に挿入できます。エクスポートは CSS を埋め込んだ独立した HTML ファイルを生成し、そのまま添付やアップロードに使えます。

使い方

  1. 左側のエディターペインにMarkdownコンテンツを書くか貼り付けてください — 右側のプレビューがリアルタイムで更新されます。
  2. ツールバーを使って素早く書式設定:太字・斜体・見出し・リンク・画像・コードブロック・テーブル。
  3. ドキュメントをクリーンなHTMLとしてエクスポートする、レンダリング済みプレビューをコピーする、または生のMarkdownファイルをダウンロードすることができます。

使用するタイミング

  • README やコントリビューションガイドを、タイピング中の見栄えを確認しながら書きたいとき。
  • Markdown が使えない CMS に貼り付ける前に、Markdown でブログ記事を下書きしておきたいとき。
  • 会議メモを整理するとき。見出しで節を切り、タスクリストで ToDo、テーブルで決定事項をまとめる。

結果

プロジェクトのREADMEを書きます——見出し、機能リスト、JavaScriptハイライト付きコードブロック、インストールテーブルを追加。入力しながらプレビューで結果を確認でき、最終HTMLをエクスポートできます。

よくある質問

コードブロック内でシンタックスハイライトは効きますか?
効きます。フェンスドコードブロックの開きバッククォートの後に言語識別子(```javascript、```python、```bash など)を書けば、プレビューが highlight.js のスタイルで色付けします。不明または未指定の言語は色なしの等幅テキストとして表示されます。
ページを再読み込みすると、書いた Markdown は残りますか?
はい。1 文字ごとに端末へ自動保存され、次回ページを開いたときに下書きが復元されます。再読み込みやタブを誤って閉じた後でも復元できます。下書きが読み込まれると小さなバナーで知らせます。保存されたコピーを消すにはリセットを押す(またはエディターを空にする)だけです。
スクリーンショットをエディターに直接貼り付けできますか?
できます。画像やスクリーンショットを貼り付けると、base64 データ URL としてそのまま文書に埋め込まれ、Markdown の画像記法がカーソル位置に挿入されます。ただし注意点として、データ URL はファイルを大きくし、多くのプラットフォーム(GitHub の README を含む)では表示されません。共有する文書なら、画像をホスティングにアップロードして ![説明](https://...) にリンクを貼るほうがソースが軽く保てます。
「HTML エクスポート」と「レンダリング結果のコピー」はどう違いますか?
HTML エクスポートは <html>、<head>、埋め込み CSS、内容を <body> に収めた完全なドキュメントを生成します。レンダリング結果のコピーは内部の HTML 断片だけを渡すので、自前のテンプレートで内容をラップするタイプの CMS に貼り付けるのに向いています。
改行を 1 つ入れたのに、プレビューで改行されないのはなぜですか?
標準 Markdown は段落内の単一改行をソフトラップとして扱うためです。強制改行したい場合は行末に半角スペース 2 つを足すか、空行を 1 行入れて新しい段落にしてください。GitHub や多くの静的サイトジェネレーターも同じ挙動です。

関連ツール