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

Amazon, Alc, Weblio などを開いたら検索フィールドがフォーカスされるようにする

Amazon, Alc, Weblio などを開いたら検索フィールドがフォーカスされるようにする方法を紹介します。

Web

HTTP の Range ヘッダフィールドを使い、ページの一部分だけを取得する

HTTP/1.1 の Range ヘッダフィールドを使って、ページの一部分のみを取得する実験です。 目次1. Range ヘッダフィールドとは?2. 環境3. 使うツール4. 対象ページ5. 実験6. …

Web

HSTS が原因で、ウェブサイトが勝手にhttps接続しないようにする

HSTSが原因で、サイトが勝手にhttps接続されないようにする方法について説明します。

CSS

overflow:hidden が指定された領域内に、幅の大きい table (表) を記述する

目次1. はじめに2. 対応策3. おわりに 1. はじめに 本ウェブサイトは、スマートフォンのサイズだと 1カラムのレイアウトになるのですが、その際、画面全体を表す HTML要素のスタイルに、「ov …

Web

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

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