当サイトの一部ページには、アフィリエイト・アドセンス・アソシエイト・プロモーション広告を掲載しています。

Amazonのアソシエイトとして、Security Akademeiaは適格販売により収入を得ています。

広告配信等の詳細については、プライバシーポリシーページに掲載しています。

消費者庁が、2023年10月1日から施行する景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています。もし問題の表現がありましたら、問い合わせページよりご連絡ください。

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

ページ編集画面にMarkdownをペーストしてもうまくいかないことがある理由【WordPress編】

はじめに

いつもブログをご覧いただきありがとうございます。

ミジンコに転生したIPUSIRONです😀

IPUSIRONのプロフィールを見る

以前から悩んでいたことが解決したので情報共有です。
GutenbergにMarkdownをペーストするときにうまくいかない場合には、いつも「—」が含まれていたことに気づきました。
つまり、「—」が書式変換を壊していたのです。

現象

WordPressのGutenberg(ブロックエディター)には、Markdownテキストをペーストすると自動的にブロックに変換してくれる機能があります。見出し(#)、リスト(-)、コードブロック(```)などは、Ctrl+Shift+V でペーストすれば適切なブロックとして認識されます。

ところが、Markdownの水平線(---)が含まれていると、この自動変換が正常に機能しなくなる場合があります。具体的には、見出しやコードブロックなどの書式がすべて無視され、全体がプレーンテキストとして貼り付けられてしまうのです。

再現手順

  1. 以下のようなMarkdownテキストを用意する
# 見出し1

本文テキスト。

---

## 見出し2

さらに本文。
  1. テキストエディタ(メモ帳、VSCodeなど)で全選択してコピー
  2. Gutenbergの新規投稿画面で、空の段落ブロックにカーソルを置く
  3. Ctrl+Shift+V でペースト

期待する動作は、「# 見出し1」が見出しブロックに、「—」が区切りブロックに変換されることです。しかし実際には、すべてがプレーンテキストの段落ブロックとして貼り付けられることがあります。

原因の推測

Gutenbergのペースト時のMarkdownパーサーが「—」を処理する際に、YAMLフロントマター(Markdownファイルの先頭に記述するメタデータ領域の区切り)と混同している、あるいは水平線の変換処理でエラーが発生し、後続のMarkdown変換が中断されている可能性があります。

Markdownの仕様上、「—」は以下の複数の意味を持ちます。

  • 水平線(thematic break)
  • YAMLフロントマターの区切り(ファイル先頭の場合)
  • Setext形式の見出し(直前にテキストがある場合、2レベルの見出しになる)

この曖昧さがGutenbergのパーサーに影響を与えていると考えられます。

対処法

Markdownテキストをペーストする前に、すべての「—」行を削除することです。

テキストエディターの置換機能を使えば簡単です。

  • 検索:「—」(行頭から行末まで一致させる場合は正規表現で「^—$」)
  • 置換:空欄(削除)

「—」を削除した状態でペーストすれば、見出し、リスト、コードブロックなどは正常にGutenbergのブロックに変換されます。

水平線が必要な場合は、ペースト後にGutenbergのエディター上で「区切り」ブロックを手動で挿入すればよいでしょう。ブロック追加(+ボタン)から「区切り」を選ぶか、「/」を入力して「区切り」と検索すれば見つかります。

検証環境

  • WordPress:ブロックエディター(Gutenberg)
  • ブラウザ:Windows上のChrome
  • ペースト方法:[Ctrl]+[V](ペースト)
    • [Ctrl]+[Shift]+[V]は書式なしペーストになる。
  • Markdownのコピー元:テキストエディター(メモ帳、VSCodeなど)

まとめ

GutenbergのMarkdownペースト機能は便利ですが、「—」(水平線)が含まれていると書式変換全体が失敗することがあります。ペースト前に「—」を除去し、あとから手動で区切りロックを挿入するのが現時点での確実な対処法といえます。

WordPressWordPress

Posted by ipusiron