遅ればせながら、ワードプレスのコード表示用のプラグインを、WP SyntaxHighlighter から、Crayon Syntax Highlighter に変更しました。理由は、ソフト404 エラーが、Google Search Console で出たからです。
Google Search Console によると、プラグインの WP SyntaxHighlighterが、Flashを使っていて clipboard.swf が、エラーの原因だとの事。
Google Search Console のヘルプを見ると、「ソフト 404 エラーとは、サイトの URL にアクセスしたときに、ページが存在しないことを示すページと 200 レベル（成功）のコードがブラウザに返されることです」だそうです。
調べたところ、ファイルは存在していたのですが、Flashを今どき使っているのもあれなので、プラグインを変えることにしました。
そこで候補に挙がったのは、
- Crayon Syntax Highlighter (plugin)
- SyntaxHighlighter Evolved (plugin)
- SyntaxHighlighter
- code-prettify
です。
当ブログでは、長年 WP SyntaxHighlighter を使てきたので、
< や ' などは、HTMLエンティティの
< や ' に変換されていました。
それで、HTMLエンティティがデコードできないと、そのまま表示されるので、調べた結果、候補は Crayon Syntax Highlighter と code-prettify に絞られました。
この2つの中で、記事内のコードの修正が少なくて済みそうな、Crayon Syntax Highlighter にしました。
と言っても、修正なしでいける訳わなく、過去記事の修正はめんどくさかったです。
ただ、Crayon Syntax Highlighter の設定画面で、
<pre> を使っている記事を一覧にしてくれる機能があったので、それだけでもだいぶ助かりました。
では、実際にどこらあたりを変更したか、下記に示します。
|
1 |
<pre class="brush: php; gutter: true; first-line: 3; highlight: [3, 5]; html-script: false"> |
|
1 |
<pre class="lang:php nums:true start-line:3 mark:3,5 mixed:false decode:true"> |
まず、
: の右にスペースがあると動作しないので、削除します。
; は、あってもなくてもよいようです。
decode:true は、HTMLエンティティが使われているコードには必須です。
次に、言語指定
brush: が
lang: に、
行番号表示指定
gutter: が
nums: に、
開始行番号指定
first-line: が
start-line: に、
マーキング行指定
highlight: が
mark: に、
言語混在指定
html-script が
mixed: に変えます。
あと、マーキング行指定の値は、
[3, 5] のように
[] で囲むと、動作しませんので削除します。
実は、classの表記方法は、WP SyntaxHighlighter と、SyntaxHighlighter は、ほぼ同じなのですが、HTMLエンティティがデコードできないようなので残念しました。
最後に、Crayon Syntax Highlighter では、 {php}echo 'hoge';{/php} のようにコードを囲めば、インラインで表示できるので、便利です。