コード表示をクレヨンしんたに変更しました。

遅ればせながら、ワードプレスのコード表示用のプラグインを、WP SyntaxHighlighter から、Crayon Syntax Highlighter に変更しました。理由は、ソフト404 エラーが、Google Search Console で出たからです。

WordPress logo 缶バッジ風
Google Search Console によると、プラグインの WP SyntaxHighlighterが、Flashを使っていて clipboard.swf が、エラーの原因だとの事。

Google Search Console のヘルプを見ると、「ソフト 404 エラーとは、サイトの URL にアクセスしたときに、ページが存在しないことを示すページと 200 レベル(成功)のコードがブラウザに返されることです」だそうです。
調べたところ、ファイルは存在していたのですが、Flashを今どき使っているのもあれなので、プラグインを変えることにしました。
そこで候補に挙がったのは、

です。
当ブログでは、長年 WP SyntaxHighlighter を使てきたので、 < や ' などは、HTMLエンティティの &lt; &#039; に変換されていました。
それで、HTMLエンティティがデコードできないと、そのまま表示されるので、調べた結果、候補は Crayon Syntax Highlighter と code-prettify に絞られました。
この2つの中で、記事内のコードの修正が少なくて済みそうな、Crayon Syntax Highlighter にしました。
と言っても、修正なしでいける訳わなく、過去記事の修正はめんどくさかったです。
ただ、Crayon Syntax Highlighter の設定画面で、 <pre> を使っている記事を一覧にしてくれる機能があったので、それだけでもだいぶ助かりました。

では、実際にどこらあたりを変更したか、下記に示します。

まず、 : の右にスペースがあると動作しないので、削除します。
; は、あってもなくてもよいようです。
decode:true は、HTMLエンティティが使われているコードには必須です。
次に、言語指定 brush:lang: に、
行番号表示指定 gutter:nums: に、
開始行番号指定 first-line:start-line: に、
マーキング行指定 highlight:mark: に、
言語混在指定 html-scriptmixed: に変えます。
あと、マーキング行指定の値は、 [3, 5] のように [] で囲むと、動作しませんので削除します。

実は、classの表記方法は、WP SyntaxHighlighter と、SyntaxHighlighter は、ほぼ同じなのですが、HTMLエンティティがデコードできないようなので残念しました。

最後に、Crayon Syntax Highlighter では、 {php}echo 'hoge';{/php} のようにコードを囲めば、インラインで表示できるので、便利です。

関連記事

カテゴリー:WordPress
タグ: , ,

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください