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

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

関連記事

Web

Webサイトに使用されている色のコントラストをチェックする

目次1. はじめに2. Webコンテンツで推奨されるコントラスト比3. コントラスト比をチェックすることができるサービス4. コントラスト比の問題を自動的に検知する 1. はじめに 本ページでは、We …

Web Programming

Webプログラミングのための Web入門

この記事では、Webプログラミングで必要になる Webの知識をご紹介します。 目次1. インターネット2. インターネットを土台として存在するプロトコル3. Web とは?4. URL5. HTML2 …

Web

CORS の プリフライト・リクエストを発生させて観察する

CORS の プリフライト・リクエストを発生させて観察するページを作成しました。

Web

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

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

Chrome

Chrome の通信ログ(TCP/IPも含む)を記録する

Chrome の通信ログ(TCP/IPも含む)を記録する方法を紹介します。