Softonic

Markdown フォーマッター

ステップ 1 / 2
次へ

Markdown ドキュメントを貼り付けると、フォーマッターが一貫したスタイルに書き換えます。見出しレベルの飛び（H4 の後に H2 が来るなど）を修正し、ソース上で揃うようにテーブル列を整え、ブロック間を必ず 1 行の空行にし、リストマーカーを - に統一し、連続する空行をまとめ、参照スタイルのリンク定義を末尾に並べ替えます。レンダリング後の HTML は変わらず、ソースファイルだけが整うため、差分（diff）が読みやすくなります。

フォーマッターが Markdown を書き換える仕組み

  1. 1

    Markdown を貼り付け

    生のドキュメントをドロップします、README、ドキュメントページ、議事録など。

  2. 2

    スタイルオプションを選ぶ

    リストマーカー（`-`/`*`）、見出しスタイル（ATX/Setext）、テーブルの配置、折り返し桁。

  3. 3

    整形

    ドキュメントを AST に解析し、選択したスタイルで再シリアライズします。

  4. 4

    出力の差分を確認

    左右に並べた表示で、貼り戻す前に何が変わったかを確認できます。

フォーマッターが修正する内容

  • リストマーカー。 *、-、+ はすべて一貫した 1 文字（デフォルトは -）に統一されます。
  • 見出しの階層。 H2 の後に H3 を挟まず H4 が続く場合に警告（または昇格）します。
  • 空行。 ブロック間はちょうど 1 行の空行にします。3 行以上の連続はなくします。
  • テーブル。 Markdown レンダラーは気にしませんが、ソース上でパイプ（|）が揃うように各列を整えます。
  • 行末の空白。 意図的な 2 スペースの改行マーカーを除き、各行の行末の空白を削除します。
  • 参照リンク。 [label]: url の定義をドキュメント末尾に集め、アルファベット順に並べます。
  • コードフェンス。 言語タグを小文字に統一し、インデントによるコードブロックをフェンス付きブロックに変換します。

設定できるスタイルオプション

オプション デフォルト 代替
リストマーカー - *、+
見出しスタイル ATX H1/H2 は Setext
強調の区切り文字 * _
太字の区切り文字 ** __
折り返し桁 0（無効） 80、100、120
参照リンクの並べ替え 有効 無効

一貫した Markdown が重要な理由

チームのリポジトリでは、一貫しない Markdown はノイズの多い差分を生みます。誰かが別のエディターでファイルを保存するたびに、リストマーカーが入れ替わり、テーブルが組み直されます。フォーマッターが 1 つのスタイルを強制するため、プルリクエストのレビュアーは内容の変更だけを見られます。文章向けの prettier と考えてください。

整形すべきでない場合

  • フェンス付きコードブロック はバイト単位でそのまま保たれます。フォーマッターがコードブロックの中身に触れることはありません。整形でコードが変わったら、それはバグです。
  • 狭い幅での 意図的なハード改行（ターミナルプロジェクトの readme.md など）は、折り返し桁を有効にすると再折り返しされます。手動で調整した改行を保ちたい場合は折り返しを無効にしてください。
  • 埋め込み HTML ブロック はそのまま通過します。

置き換え可能なツール

ローカルの CLI を使いたい場合、フォーマッターは remark-gfm プラグインを付けた remark-stringify と同じ AST ルールを使います。prettier --parser markdown も同様の結果になります。

よくある質問

いいえ。フォーマッターはソースだけを書き換えます。整形の前後でレンダリングされる HTML 出力は同等になるはずです。レンダリングが変わった場合はバグとして報告してください。

いいえ。ファイル先頭の YAML または TOML のフロントマターは検出され、そのまま通過します。

はい。折り返し桁を 80、100、120 に設定すると段落が再折り返しされます。コードフェンス内の行は決して変更されません。

いいえ。フォーマッターはリンクが有効であると想定し、参照リンクの定義を並べ替えるだけです。リンクチェッカーは別途ご利用ください。

いいえ。解析と整形はブラウザー内で実行され、内容がデバイスの外に出ることはありません。

関連ツール

Webpack設定ジェネレーター

素の JavaScript、React、Vue 向けに webpack 5 の webpack.config.js を生成します。TypeScript、Babel、CSS や Sass、画像、HtmlWebpackPlugin、開発サーバー、npm install のコマンドまでそろいます。

CSSローディングアニメーション生成ツール

純粋なCSSで円形スピナーを作成できます。直径、枠の太さ、アクセントカラー、回転速度を設定し、ライブプレビューを確認して、そのまま使えるCSSをコピー。SVGもJavaScriptも不要です。

OpenAPI 検証ツール

OpenAPI または Swagger のドキュメントを JSON か YAML で貼り付けて、コア構造をチェックします: バージョンフィールド、info オブジェクト、paths を、わかりやすいエラーと警告つきで。

カラーティントジェネレーター

ベースカラーの明るい色合いを生成します。デザイン システム トークン、背景、ホバー状態を 3 ～ 20 段階でスケールします。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

PHPフォーマッター

単純なPHPコードに改行と2または4スペースのインデントを追加します。結果は必ず確認してください。PHPパーサーでもPSR-12準拠ツールでもありません。

このツールは他の言語でも利用できます