2013.06.18
SyntaxHighlighter Evolvedの表示をカスタマイズ
この記事は4216日前に投稿されたものです。
ウェブ上でソースコードをわかりやすくしてくれる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をそれぞれお好きなように。
まとめ
もちろん、スタイルシートなんで他にもカスタマイズできますが、とりあえず僕がしたかったことはこれくらいです。いろいろいじってみてください。
