変化を求める人

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

   

Crayon Syntax Highlighterとは
[crayon][/crayon]で囲まれた部分の見た目をエディタ風に変えてくれるもの。

デフォルト設定では<pre></pre>タグを用いても適用する。
また表示変更が適用される箇所では、エスケープ文字はそのままの文字列として表示(&gt;など)

今更だが、ソースコードに色がついたり良い感じになった。が、問題も発生。
それでも設定をちょっといじっただけでOKだった。

利用する場合、プラグインを検索して追加すればOK。


導入直後の主な問題点

以前の記事では、ソースコードの表示に<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。

 - WordPress , ,

  関連記事

このブログにも「はてブ」ボタンが付いていたのに、今になってはじめて、はてなブックマークを始めた。

このブログにも、ソーシャルボタンはついている。Google+、Facebook、 …

[STINGER5]関連記事のカスタマイズ。取得条件を変更し表示内容を変更する

今まで気が付かなかったのですが、STINGER5のデフォルト設定の場合、関連記事 …

プレビューを頻繁に表示する場合、アドセンスは非表示にしたほうがいいかも

今日のアドセンスの表示回数がアナリティクスのデータと比べるとやけに多い。 記事の …

カテゴリやアーカイブの一覧をクリックで開閉するように変更してみた。

このサイトをスマホで見たときに少し縦長になっている気がする。 ということで、一番 …

AdSenseの広告ユニットごとに収益を確認する方法

カスタムチャネル 指定した広告ユニット毎にデータ解析を行うことが出来る。 URL …

スポンサーリンク

  週間人気記事

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です