taccuma note

SyntaxHighlighterでソースがはみ出しちゃったときの対処法など

syntaxhighlighter-hamidashi-1
ブログなどにHTMLやCSSなどのソースを表示させるときに、見た目を美しくしてくれるのがSyntaxHighlighter。とっても有名なプラグインなので使ってる人も多いと思いますが、いざ使ってみると…右側部分がはみ出してしまうことが多々あります。こんな時にどうしたらよいか・・・簡単にできる対処法をご紹介します。

はみ出してる部分のソースを確認すると・・・

Google Chromeだったら調べたい部分を右クリックして「要素を検証」を押せば…簡単にその部分のHTMLソースがどうなってるのか確認できます。

<div id="highlighter_471744" class="syntaxhighlighter  ">
(途中は省略)
</div>

SyntaxHighlighterは必ずこんな風な感じでdivタグで囲まれてます。ですから、このidかclassに自動改行を制御するCSSを上書きしてやれば問題は解決するはずです。

最初のidですが、後ろの数字部分はランダムに割り振られるみたいなので・・・一つのページに複数のSyntaxHighlighterがあればその分後ろの数字部分が違うid名が存在しますね。

#highlighter_471744 {
word-break: break-all;
}

こんな風に指定してしまうと…
SyntaxHighlighter一個分しか修正できません。

#highlighter_* {
word-break: break-all;
}

こんな風に数字部分をアスタリスクにしてみましたが、
スタイルがあたりませんでした(涙)

.syntaxhighlighter {
word-break: break-all;
}

今度はクラス名につけてみましたが・・・
スタイルがあたりませんでした。idとclassが両方ついているdivだから、クラス名にだけ指定しても弱いのかも?

試行錯誤して最終的に決まった指定方法は・・・

div[id^="highlighter"]	{
	word-break:	break-all;
}

なんだか難しい指定方法ですが・・・こんな風に指定すると、ページ内の全部のSyntaxHighlighterにスタイルがあたりました。簡単に解説すると、divタグの中のid属性が「highlighter」で始まるものに以下のスタイルを当てます・・・という感じ。

CSS3から出来るようになった指定方法で…僕もググって初めて知りました(;^ω^)
慣れないとなかなか難しい指定方法ですね。

もう一個、、、こんな難しい指定方法したくないよ!って人には
こんな感じで指定してもスタイルがあたりました。

.syntaxhighlighter table {
word-break: break-all;
}

先ほど出てきたクラス名の中の、テーブルタグの中に・・・
以下のスタイルをあてますよっていう感じ。

クラスに続いてテーブルタグまで入れると
きっちりスタイルがあたりました。こっちの方がわかりやすいですね♪

この記事をシェアする

コメント

コメントは管理人の承認後に公開されます...

Thanks for your comment.

  1. […] SyntaxHighlighterでソースがはみ出しちゃったときの対処法など […]

Leave a Reply

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

最近の投稿

おすすめ

タグクラウド

カテゴリー