Markdown エディター・プレビュー(Markdown Studio)

左に書くと右にすぐ反映される Markdown エディターです。表の縦線をそろえる整形、目次の自動作成、HTML 出力に対応し、スクリプトは常に無害化、外部画像はオンにしたときだけ読み込みます。

端末内で処理・アップロードなし

ファイルや入力内容はお使いの端末(ブラウザ)の中だけで処理され、サーバーへは送信されません。

Markdown
行数: 0
プレビュー
Markdown を入力すると、ここにプレビューが表示されます

使い方

  1. 左の「Markdown」欄に書くか、「ファイルを開く」で .md ファイルを読み込みます。右のプレビューに入力と同時に反映されます。

  2. ツールバーのボタン(見出し・太字・リスト・リンク・表など)や Ctrl / ⌘ + B・I・K で書式を入れます。選択した文字に適用され、もう一度押すと解除されます。

  3. 表を書いたら「表を整形」で縦線(|)の位置をそろえます。日本語などの全角文字も 2 文字分として計算します。

  4. 下の「目次」で見出しの一覧を確認し、クリックでプレビューの該当箇所へ移動、「目次を先頭に挿入」で Markdown の目次を追加できます。

  5. 「HTML をコピー」「.md を保存」「HTML ファイルを保存」で書き出します。HTML ファイルは CSS 込みの 1 ファイルなので、そのままブラウザで開けます。

できること

GFM 準拠のリアルタイムプレビュー

表・チェックリスト・取り消し線・コードブロック・自動リンクなど GitHub Flavored Markdown に対応(marked を使用)。分割・編集のみ・プレビューのみを切り替えられ、分割表示ではスクロール位置を同期します。

安全なプレビュー

変換した HTML は必ず DOMPurify で無害化し、<script> やイベント属性、iframe・動画などの外部読み込み要素を取り除きます。リンクは新しいタブで開き、元のページを操作されないよう rel="noopener" を付けます。

外部画像は許可制

初期状態ではインターネット上の画像を読み込まず、代わりに枠を表示します。画像の読み込みによる閲覧の追跡(トラッキングピクセル)を防ぎ、必要なときだけスイッチで読み込めます。

表の整形(全角対応)

GFM の表の列幅を計算して | の位置をそろえ、左寄せ・中央・右寄せの指定(:--- など)も保ちます。漢字・かな・全角記号・絵文字は 2 文字分として計算し、コードブロック内は変更しません。

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

見出し・太字・斜体・取り消し線・コード・リスト・チェックリスト・引用・リンク・画像・コードブロック・表・区切り線をボタンで挿入。ブラウザの「元に戻す」(Ctrl+Z)もそのまま使えます。

目次の自動生成と書き出し

見出しから日本語にも対応した ID 付きの目次を作り、プレビュー内を移動したり Markdown として挿入したりできます。HTML のコピー、.md、CSS を埋め込んだ単体の HTML ファイルとして保存できます。

こんなときに

  • GitHub の README や Issue の文章を、投稿前に見た目を確認しながら書きたい
  • ずれてしまった Markdown の表の縦線をきれいにそろえたい
  • Markdown の文書を、メールや CMS に貼れる HTML に変換したい
  • 見出しから目次を自動で作り、長いドキュメントを読みやすくしたい
  • インストール不要で、社外秘のメモを外部に送らずに Markdown で整えたい

対応形式

読み込み

.md.markdown.txt(UTF-8)

書き出し

Markdown(.md)HTML(コピー)単体 HTML ファイル(CSS 埋め込み)

対応状況

機能対応補足
GitHub Flavored Markdown(表・チェックリスト・取り消し線)対応—
HTML の無害化(スクリプト・イベント属性の除去)対応常に有効
外部画像の読み込み一部対応既定ではブロック。スイッチで許可したときだけ読み込み
表の整形(全角文字の幅を考慮)対応—
数式(LaTeX)・Mermaid 図の描画非対応—
コードのシンタックスハイライト非対応コードブロックは等幅で表示
HTML から Markdown への変換非対応—
PDF・Word への書き出し非対応HTML ファイルをブラウザで開いて印刷すると PDF にできます
オフラインでの利用対応一度開いたあとは通信なしで動作(外部画像を除く)

制限・注意事項

  • 読み込めるファイルは 5 MB までです。
  • 生の HTML は安全な範囲(見出し・表・リンク・画像など)だけを表示し、script・style・iframe・form・video などは削除します。
  • 外部画像を許可すると、画像のあるサーバーにあなたの IP アドレスやブラウザの情報が送られます。
  • スクロールの同期は全体に対する位置の割合で合わせるため、画像や表が多い文書では多少ずれることがあります。

プライバシーと安全性

書いた内容はブラウザの中だけで変換され、LIBRA Works のサーバーに送信・保存されることはありません。外部画像も、あなたが許可するまで読み込まないため、文書を開いただけで第三者に通信が発生することはありません。

よくある質問

GitHub と同じ表示になりますか?
GitHub Flavored Markdown(表・チェックリスト・取り消し線・自動リンクなど)に準拠しているため、ほとんど同じ構造になります。ただし絵文字ショートコード(:smile:)、数式、Mermaid 図、コードの色分けには対応していません。
Markdown の表をきれいにそろえるには?
表を書いて「表を整形」を押すと、各列の幅を計算して | の位置をそろえます。全角文字は 2 文字分として扱うので、等幅フォントのエディターでもずれません。左寄せ・中央・右寄せの指定はそのまま保たれます。
Markdown に書いた <script> は実行されますか?
実行されません。プレビューと書き出しの HTML はすべて DOMPurify で無害化し、スクリプトやイベント属性(onerror など)を取り除きます。書き出した HTML ファイルにもスクリプトを禁止する設定(CSP)を入れています。
画像が表示されず枠だけになるのはなぜですか?
プライバシー保護のため、インターネット上の画像は初期状態で読み込みません。「外部の画像を読み込む」をオンにすると表示されます。
Markdown を HTML に変換するには?
「HTML をコピー」で本文の HTML をクリップボードへ、「HTML ファイルを保存」で見た目を整える CSS を埋め込んだ単体の HTML ファイルを保存できます。
書いた文章はどこかに保存・送信されますか?
いいえ。変換はブラウザ内で行い、サーバーには送信しません。ページを閉じると内容は消えるため、必要な場合は「.md を保存」で保存してください。

日時・Unix時間変換(Date & Time Studio)

1700000000 のような Unix 時間も「令和6年1月15日」も貼るだけで自動判別し、ISO 8601 や RFC 2822 など 15 形式と世界の時刻に変換します。夏時間・元号の境目・月末の扱いまで正確に計算します。

エンコード・デコード(Encode / Decode Studio)

文字化けした %E3%81%82 や eyJ… のトークンを貼るだけで形式を自動判別して元に戻します。エラーは「何文字目の何が不正か」まで表示し、処理はすべてブラウザ内で完結します。

文字数カウント・テキスト整形(Text Studio)

貼り付けた瞬間に文字数・バイト数・行数・原稿用紙の枚数が分かり、全角⇔半角やカタカナ変換、空行・重複行の削除もワンクリック。変更箇所の数を表示し、いつでも元に戻せます。

Unicode 文字調査(Character Inspector)

貼り付けた文字を 1 文字ずつ分解し、U+ コード・バイト列・種類を表示します。ゼロ幅スペースや BOM などの見えない文字、①・㈱・髙 などの機種依存文字も見つけて、ワンクリックで削除・置き換えできます。

IT 計算ツール(容量・転送時間・稼働率・RAID)

容量の単位換算(SI の GB と IEC の GiB)、回線速度とファイルサイズからの転送時間、稼働率から許容停止時間、RAID の実効容量などを、根拠の式つきで計算します。「1.5GB」「100Mbps」のように単位つきで、全角数字でも入力できます。

MIME・Content-Type Studio

拡張子と MIME を相互に検索でき、Content-Type ヘッダーの誤りを指摘し、ドロップしたファイルの拡張子・ブラウザの file.type・中身の 3 つの食い違いを調べます。サーバー設定の下書きも作れます。

最終更新: