UtilityBox

開発・プログラミング

Markdown プレビューを無料で使う

Markdownを入力し、安全にサニタイズしたHTMLプレビューを表示する。 開発中のデータ確認や変換を、コピーしてすぐ試せます。

ブラウザ内処理

QUALITY REVIEW

機能・説明・操作性を確認済みです

サンプルの実処理、代表的な不正入力、説明と実装の一致、320px・390px幅の操作、関連リンクと検索情報を確認しました。

最終確認
確認者
UtilityBox運営者
確認基準
品質確認ポリシー

FEATURES

このツールでできること

  • Markdownを入力し、安全にサニタイズしたHTMLプレビューを表示する。
  • 開発中のデータ確認や変換を、コピーしてすぐ試せます。
  • 無料・会員登録不要で、PCとスマートフォンのブラウザから利用できます。

HOW TO USE

使い方

  1. 1

    Markdownを入力欄へ貼り付けます。

  2. 2

    改行、URL自動リンク、生HTMLの扱いを選択します。

  3. 3

    「Markdownを変換する」を押し、プレビュー、HTML、診断結果を確認します。

  4. 4

    公開前には外部リンク、画像、見出し構造、サイト側CSSも確認してください。

EXAMPLE

具体的な入力例・出力例

入力例

# UtilityBox

- JSON整形
- CSV変換

**無料**で利用できます。

設定:
html=true

出力例

<h1>UtilityBox</h1>
<ul>
<li>JSON整形</li>
<li>CSV変換</li>
</ul>
<p><strong>無料</strong>で利用できます。</p>

PRACTICAL USES

具体的な利用場面

  • READMEや記事下書きの見出し、表、リンク、コード表示を確認する。
  • HTMLコードが必要ならMarkdownからHTML変換を使う。
  • Markdownを入力し、安全にサニタイズしたHTMLプレビューを表示する処理を掲載サンプルで試し、本番利用前に結果を比較する。

処理仕様と結果の確認ポイント

  • MarkdownをHTML化し、危険要素をサニタイズしてプレビューする。
  • 掲載先のMarkdown方言、改行、表、画像、コードフェンスを確認する。
  • 入力コードや設定は実行せず、ブラウザ内で解析して結果・件数・エラー位置を表示する。

このツール固有の制限

  • GitHubや各CMSで拡張仕様が異なり同一表示を保証しない。
  • 入力コードは実行しない。標準仕様中心で、独自方言は段階対応。
  • 入力上限は「2MBまたは2,000,000文字を初期上限」。対象言語、runtime、方言の仕様と照合する。

SPECIFICATION & REVIEW

入力・出力仕様と確認基準

Markdownプレビューツールは「Markdownプレビュー」の作業を、markdown-it + DOMPurifyを使ってブラウザ内で処理します。入力形式、出力形式、処理上限を公開し、結果を利用する前に確認すべき点も明示しています。

入力仕様

  • 入力の種類：テキストまたは構造化データ。サンプルは「# UtilityBox - JSON整形 - CSV変換 **無料**で利用できます。 設定: html=true」です。
  • 補助入力：必須の2つ目の入力はありません。Markdownプレビューの主入力と設定だけで実行できます。
  • 設定項目：サンプルでは「html=true」を使用します。設定を変更した場合は出力との差を比較します。
  • 処理上限：2MBまたは2,000,000文字を初期上限。上限超過は処理開始前に日本語のエラーとして案内します。

出力仕様

  • 出力の種類：変換後の構造化テキスト、行数、件数。
  • サンプル出力：<h1>UtilityBox</h1> <ul> <li>JSON整形</li> <li>CSV変換</li> </ul> <p><strong>無料</strong>で利用できます。</p>
  • 保存方法：出力欄からコピーでき、必要に応じてテキストファイルとして保存できます。
  • 処理方式：markdown-it + DOMPurify。入力内容や選択ファイルを外部サーバーへ送信しません。

結果を利用する前の確認項目

  • サンプル入力「# UtilityBox - JSON整形 - CSV変換 **無料**で利用できます。 設定: html=true」で実行し、出力の先頭が「<h1>UtilityBox</h1>」の形式になるか確認します。
  • 設定「html=true」が結果へ反映され、設定変更時に出力形式・件数・単位が変化するか比較します。
  • タグの親子関係、属性、名前空間、エスケープされた文字が失われていないか確認します。
  • 入力上限、未対応形式、破損データを与えた場合に、技術的な例外文ではなく修正方法が分かるエラーになるか確認します。

仕様更新日：2026年7月21日　ツール品質方針を見る

PRACTICAL GUIDES

操作手順だけでなく、誤変換や見落としを防ぐための具体例、確認項目、処理の限界を解説しています。

ERRORS

エラーになる条件

  • 入力が空の場合。
  • 入力が2,000,000文字を超える場合。
  • ブラウザが必要なHTMLサニタイズ処理を実行できない場合。

NOTES

使用上の注意

  • 生HTMLを許可しても、script、iframe、イベント属性など危険な要素は出力から除去します。
  • 診断はMarkdown本文の静的確認です。リンク先の実在性や画像の取得成功までは検証しません。
  • 外部リンクや外部画像には閲覧者のプライバシー、Mixed Content、リンク切れの確認が必要です。
  • プレビューの見た目はUtilityBox内の表示です。貼り付け先サイトのCSSによって最終表示は変わります。

入力データを外部送信しません

入力したデータや選択したファイルは、ユーザーのブラウザ内で処理され、外部サーバーへ送信されません。

FAQ

よくある質問

Markdownプレビューツールで確認すべき点は？

掲載先のMarkdown方言、改行、表、画像、コードフェンスを確認する。

Markdownプレビューツールと別ツールの使い分けは？

HTMLコードが必要ならMarkdownからHTML変換を使う。

Markdownプレビューツールの固有仕様は？

scriptやイベント属性はプレビュー前に除去する。

Markdownプレビューは無料で使えますか？

無料で利用でき、会員登録も必要ありません。

Markdownプレビューはスマートフォンでも使えますか？

一般的なスマートフォンブラウザから利用できます。ファイル系機能は端末やブラウザの保存仕様によって操作が異なる場合があります。

入力内容は外部へ送信されますか？

送信しません。変換、サニタイズ、診断はブラウザ内で行います。

Markdown内のHTMLは使えますか？

設定で許可できますが、危険なタグや属性はサニタイズで除去されます。

リンク切れも検出できますか？

URL形式と外部リンク件数は確認しますが、リンク先への通信は行わないため実在性は確認しません。

GitHub Flavored Markdownへ完全対応していますか？

一般的な見出し、リスト、リンク、コード、表現に対応しますが、GitHub固有拡張の完全再現は保証しません。

HTMLをそのまま公開してよいですか？

公開先のCSS、CSP、リンク属性、画像alt、見出し構造を確認してから利用してください。