Simplicity でSyntaxHighlighterがうまく表示されないときの対処

気に入ってもらえたらぜひShareお願いします!

Simplicity でSyntaxHighlighterがうまく表示されないときの対処

気に入ってもらえたらぜひShareお願いします!

スポンサーリンク

Simplicity でSyntaxHighlighterがうまく表示されなかったので対処したときの方法を紹介します。

Simplicityではハイライト機能が備わってます。この機能とプラグインのSyntaxHighlighterが干渉しているのかと思い
Simplicityの方のハイライト機能をカスタマイズ画面からOFFにしました。

ハイライト機能をオフにしてSyntaxHighlighterを選択する理由

ハイライトのほうは、プラグインより早く表示できます。
しかし、デメリットとしてタグは表示できません。

SyntaxHighlighterのほうは、すべてのコードが表示されますし、行番号も表示されます。
見た目も行番号があったほうがいいし、コピペもしやすいのでこっちを選択しました。

SyntaxHighlighterだけにしてもバグ表示

行番号も表示されてSyntaxHighlighterっぽくなりましたが、
文字の修飾が違った部分にタグが挿入されててバグってました。
こんな感じです。

解決方法

こちらのブログを参考にしたら解決しました。

ソースコードをハイライトしてくれるWordPressプラグイン SyntaxHighlighter Evolv&

(1)<?php wp_head(); ?> の記述の欠落

テーマファイル header.php の <head> 内に

1
<?php wp_head(); ?>

の記述があることが前提となります。

これが無いと SyntaxHighlighter Evolved が動きません。

<?php wp_head(); ?> を設置する場所については </head> までの間であればどこでも動くのですが、色々と他のJavascript ファイルを引っ張っている場合は、それらのファイルよりも前に記述してあげた方が良さそうです。

子テーマのheader-insert.phpに

<?php wp_head(); ?>

をコピペしたら表示が正常になりました。

スポンサーリンク



気に入ってもらえたらぜひShareお願いします!