WordPressでコード表示するのに色々なプラグインがあり、どれにしようか迷っていましたが、いくつか使い勝手などを試してみて、とりあえず「SyntaxHighlighter Evolved」を使うことにしました。
決め手は、設定画面は日本語表記でわかりやすく細かな設定もできるところです。
「SyntaxHighlighter Evolved」プラグインの設定画面での例によると、コードを表示するときの方法は、いくつかあります。
SyntaxHighlighter Evolved プラグインのインストール
「SyntaxHighlighter Evolved」プラグインを利用するには、管理画面のサイドバーにある「プラグイン」⇒「新規追加」を開いて検索すると表示されます。
プラグインをインストールをして有効化すると利用できるようになります。
プラグイン詳細：SyntaxHighlighter Evolved
SyntaxHighlighter Evolvedの使用方法・設定
SyntaxHighlighter Evolved プラグインを有効化するとすぐに使用することができます。
ブロックエディターでの使い方
ブロックエディターでは、「SyntaxHighlighter」ブロックが追加されるので、ソースコードを表示したいところにブロックを追加します。
「SyntaxHighlighter」ブロックが追加されるとコード入力欄が表示されます。
ソースコードを入力するときは、ショートコードは不要です。下の例のように表示したいソースコードをそのまま入力します。
ブロックで言語設定、行番号の表示などの設定ができます。
「ショートコード」ブロックを使ってもソースコード表示はできます。
[php]
<?php
echo “Hello”;
?>
[/php]クラシックエディターでの使い方
以前のクラシックエディターを使用した場合の例です。
【例1】PHP言語表示設定
[code lang="php"]
<?php
echo “Hello”;
?>
[/code]
<?php echo "Hello"; ?>
【例2】PHP言語表示設定
[php]
<?php
echo “Hello”;
?>
[/php]
<?php echo "Hello"; ?>
コードを入力の手間を省きたい場合、AddQuicktagに以下のコードを登録すると楽です。
ラベル名：適当な名前
開始タグ：[code lang="php"]
終了タグ：[/code]
特殊文字が変換されてしまう時の対応
私の記事を確認すると、ソースコードにある特殊文字が、「<」が「<」、「>」が「>」、「&」が「&」のように変換されて表示される現象が発生していました。
そこで、公式サポートページ（Ampersand character）で確認すると、下のコードをfunctions.phpファイルに追加することで不具合を解消することができました。
function kagg_syntaxhighlighter_precode( $code, $atts, $tag ) {
if ( 'code' === $tag ) {
$code = wp_specialchars_decode( $code, ENT_QUOTES );
}
return $code;
}
add_filter( 'syntaxhighlighter_precode', 'kagg_syntaxhighlighter_precode', 10, 3 );ブロックに変換するときは要注意
クラシックエディターのときにショートコードでソースコードを入力するのですが、それをブロックエディターに変換すると表示がおかしくなるので、変換する場合は、気をつけたほうが良いです。
コメント