【WordPress】Prism.jsで載せるコードをエスケープする方法
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' );
これでコード内に「<」や「>」の記号が含まれていた場合でも、エスケープされるので表示が崩れなくなる。