デベロッパーズブログ

  1. HOME > 
  2. 加藤 正人のデベロッパーズブログ > 
  3. SyntaxHighlighter ではまった話

加藤 正人のデベロッパーズブログ

加藤 正人

氏名
加藤 正人
役職
多分SE
血液型
秘密
出没
美味しいもののあるところ
特色
タヒチ大好き。ちょいメタボ。

加藤 正人

2012/12/08

SyntaxHighlighter ではまった話

 

このブログでも使っている Alex Gorbatchev 氏の SyntaxHighlighter だが、これは指定された pre タグで囲まれた文字列を JavaScript で処理してハイライト表示してくれる。

その表示は実際には文字列を HTML タグ構造に変換してハイライトする。このため、いくつかのタグをセレクタなしでスタイル設定していると、SyntaxHilgihter が展開するタグと衝突しておかしな表示になってしまうことがある。

たとえば、このブログの HTML コード内に

	code { margin: 10px 0 10px 10px; display: block}

という設定があると、こんな風になってしまう。

bad sample

Google Chrome の開発ツールで SyntaxHighlighter の処理部分を表示してみると、次のように展開されていた。

今回の場合は code タグに対する display: block が影響しているのだが、他にも span タグも使っている。従って、(これらを含めた) タグに対するセレクタなしのグローバルなスタイル定義には注意が必要だ。

関連タグ: JavaScript  CSS  SyntaxHighlighter 

関連エントリー

お気軽にお電話ください 052-875-9930 年中無休にて対応しております

メールでのお問い合わせはこちら

お問い合わせフォーム

ページの先頭へ戻る

ページトップへ戻る