SyntaxHighlighter Evolvedの「追加のCSSのclass名」について

SyntaxHighlighter自体はこのブログでも使っていますので慣れていますが、WordpressのプラグインになるとSyntaxHighlighter専用の管理画面があり、管理画面は初めての経験です。

で、私がよく分からなかったのは、赤で囲っている「追加のCSSのclass名(複数可能)」という部分。

試しに「addClass」と入力してソースを見てみると、こんな感じです。

管理画面で指定した「addClass」がありません。

指定したクラス名がどこに適用されるかというと、デベロッパーツールで確認することができます。ちなみに下の画像はChromeで確認したものです。

で、全体を囲むdivにちゃんと「addClass」という名前のクラスが指定されています。

ということで、こちらで追加したクラスを編集することでスタイルを変えることができます。ただ、元々用意されているCSSのほとんどで「!important」が付いているので、追加したスタイルが優先されるよう注意が必要です。

「!important」を付けた上で優先順位を高くするか、「!important」をなくす必要があります。個人的には「!important」を乱用するのは好きではないで消しておきたいです。

SyntaxHighlighterは仕組みが複雑で元々あるCSSがどの部分を表すか分かりにくいですが、デベロッパーツールで見てSyntaxHighlighterの仕組み理解するとハードルはかなり下がると思います。

ちょっと地味な内容ですが参考になれば幸いです。