Web

【WordPress】JP Markdownプラグインが code タグの属性を削除する問題への対応方法

投稿日:

1. 現象

WordPress の JP Markdown プラグインを使っていると、以下のような (<pre> タグを伴わない単独の) <code> タグを記述した場合、

<code class="bar" style="color:red;">Foo</code>

属性が削除されて出力されてしまいます。

<code>Foo</code>

これでは、<code> タグに対して、CSS クラスを複数用意して使い分けることができず不便です。

JP Markdown プラグインについて

JP Markdown プラグインは、WordPress の本文を Markdown 形式で記述するためのプラグインです。
WordPress.com」などを提供している Automattic 社は、「Jetpack」という有名なプラグインを開発していますが、JP Markdown は、この Jetpack の派生プラグインということになっています。
但し、最新バージョンのWordPress ではテストされていませんので、ご利用は自己責任でお願いします。

2. 原因

jetpack-markdown/markdown/gfm.php ファイル内にある single_line_code_preserve() 関数で、<code>タグ内の文字列を一旦退避させるような処理 (preserve 処理) を行っているのですが、ここで、<code> タグの属性値を保持させず、属性なしの <code></code> で挟んだ文字列を返すようになっているのが原因です。

参考:https://plugins.svn.wordpress.org/jetpack-markdown/trunk/markdown/lib/gfm.php

3. 対応方法

jetpack-markdown/markdown/easy-markdown.php ファイルを編集します。

354行目に緑字の行を追加します。

public function get_parser() {
    if ( ! self::$parser ) {
        require_once('lib/0-load.php');
        self::$parser = new WPCom_GHF_Markdown_Parser;
+       self::$parser->preserve_inline_code_blocks = false;
    }
    return self::$parser;
}

※ 先頭にある「+」は、「追記する」という意味です。この記号は記述しないでください。

これにより、<code> タグ内の preserve 処理をさせません。この処理を実行しなければ、<code> タグの処理自体が行われないので、属性部分はそのまま保持されます。
本当はコード内でなく、設定ファイルなどで変更したいのですが、そういう機能がないので、仕方なくコード内に追記しました。

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

DokuWiki

DokuWiki で閲覧専用ユーザーを作る手順

DokuWiki において、閲覧専用ユーザーを作成する手順を紹介します。 目次DokuWiki で、閲覧専用ユーザーを作成する手順1. 閲覧専用グループを追加する。2. ユーザーにグループを指定するお …

Web

ツールを公開するWebサイトを作っています

いろいろなツール(Webページ上で提供できるツールに限ります)を公開するサイトを作っています。 Tools on Web https://tools.laboradian.com/ 載せているツールは …

Web

HTTP クッキーをより安全にする SameSite 属性について (Same-site Cookies)

HTTP クッキー(Cookie) をより安全に使用することができる SameSite 属性 について説明します。 目次1. HTTP クッキーの基本動作2. クッキーの SameSite 属性につい …

Web

ウェブブラウザがページを取得して表示するまでの流れ

目次1. はじめに2. Chrome デベロッパーツールの [Network]パネル3. リソース毎の処理の流れ4. その後の流れ5. DOMContentLoaded と load イベント6. グ …

Web

<pre><code>タグが引き起こす モバイルユーザビリティのエラー「コンテンツの幅が画面の幅を超えています」

<pre><code>タグが、モバイルユーザビリティのエラー「コンテンツの幅が画面の幅を超えています」を引き起こしていました。