【WordPress】Prism.jsで載せるコードをエスケープする方法

2018年12月9日
HTML
PHP
WordPress

WordPressでPrism.jsを使用してHTMLのコードを載せる場合に、タグの「<」と「>」の記号をエスケープ( 適切なコードに変換 )しないと表示が崩れたので対応した。

手順

エスケープする関数を定義する

下記の関数をPHPファイルに定義する。

function escape_code_in_prism( $content ) {
    $on_replace = function( $matched_strings ) {
        $pre_attributes     = $matched_strings[1];
        $code_attributes    = $matched_strings[2];
        $replaced_code      = preg_replace( 
            [ '/</', '/>/' ], 
            [ '<', '>' ], 
            $matched_strings[3] 
        );

        return sprintf( 
            '<pre%s><code%s>%s</code></pre>', 
            $pre_attributes, 
            $code_attributes, 
            $replaced_code 
        );
    };

    $content = preg_replace_callback( 
        '/<pre(.*?)><code(.*?)>(.+?)<\/code><\/pre>/s', 
        $on_replace, 
        $content 
    );

    return $content;
}

エスケープする関数をフィルターフックへ追加する

the_contentのフィルターフックへ先ほど定義した関数を追加する。

add_filter( 'the_content', 'escape_code_in_prism' );

これでコード内に「<」や「>」の記号が含まれていた場合でも、エスケープされるので表示が崩れなくなる。

関連ページ