Crayon Syntax Highlighterをブログに適用してみた。デフォルト設定だとちょっと問題があったので変更を加えた

導入直後の主な問題点

以前の記事では、ソースコードの表示に<pre><code>タグを利用していた。
そのため、以前の記事の<pre>タグに適応された際に生じた問題。

• style.cssで定義していたスタイルが影響して表示がおかしくなる
• エスケープ文字が特殊文字に置き換わらずにそのまま表示される

変更を加えた箇所

<pre><code>に適用していたスタイルが中途半端に影響して変な感じになる問題

このブログでは、<pre>のさらに外側に<div>を置き、divに対しクラス名でスタイルを適用という形を取っていたので、style.cssの該当クラス名をコメントアウトしただけでとりあえず解決。

とはいえ、余計な<div>タグが残っている。
消した方がいいのだろうか、いや、また使うかもしれないし残しておくべきか。

エスケープ文字が特殊文字に置き換わらずに、そのまま文字列として出力されてしまう問題

Crayon Syntax Highlighterの設定で、「コード内のHTMLエンティティを出力」にチェックを付ければOK。
エスケープ文字を特殊文字に置き換えてくれるようになる。

そもそもHTMLタグなどをそのまま表示したい場合(<div>など)、そのままの形で本文に書いてしまうと、HTMLタグと認識され表示されない。
そのため、< は &lt; といった具合にエスケープ文字を用いて表示している。

しかし、Crayon Syntax Highlighterを適用するとデフォルト設定ではエスケープ文字が置き換わらずにそのままの形で表示される。
そのため、以前の記事にもエスケープ文字を用いて説明している箇所が、そのまま(&lt;div&gt;など)表示されてしまうので、非常に読みづらくなっていた。

だが、上記の設定にチェックを付けるとちゃんと特殊文字に置き換えて表示されるようになっていたのでOK。