2013-06-18

SyntaxHighlighter Evolvedの表示をカスタマイズ


ウェブ上でソースコードをわかりやすくしてくれるSyntaxHighlighterのWPプラグイン、「SyntaxHighlighter Evolved」のカスタマイズ方法です。

 

WPの管理画面のプラグイン検索からでもインストールできます。
プラグインのダウンロードはこちらから。

スタイルシートをカスタマイズ

スタイルシートが格納されてる場所

wp-content / plugins / syntaxhighlighter3 / style

※2を使用している場合は「syntaxhighlighter2」の中のものをいじってください。

文字の大きさを変えたい、行間を広げたい

shCore.css
一番上の「.syntaxhighlighter a,.syntaxhighlighter div,〜」
文字の大きさは「font-size」で、行間は「line-height」で。

行の背景色を変えたい

shThemeDefault.css
「.syntaxhighlighter .line.alt1」の「background color」※1行目の色
「.syntaxhighlighter .line.alt2」の「background color」※2行目の色
両方同じ色を指定しておけば、色変えがなくなります。

行番号を変えたい

shThemeDefault.css
「.syntaxhighlighter .gutter」 色はcolorで指定。

行番号のラインを変えたい

shThemeDefault.css
「.syntaxhighlighter .gutter .line」
border-right-width、border-right-style、border-right-colorをそれぞれお好きなように。

まとめ

もちろん、スタイルシートなんで他にもカスタマイズできますが、とりあえず僕がしたかったことはこれくらいです。いろいろいじってみてください。


コメントを残す