wordpressプラグイン『Syntaxhighlighter』のCSSをカスタマイズする

2016年8月24日


Photo:CSS By:antxoa

Photo:CSS By antxoa

記事の中にHTMLやCSSのコードを見やすく表示させたい時ってありますよね。

そんな時に便利なのがwordpressプラグインのSyntaxHighliterです。

スポンサードリンク

使い方はとっても簡単

表示したいコードの前後に、表示する言語名を大カッコでくくるだけ。
こんな感じです。

[html]
ここに表示させたいコードを記入する。
[/html]

でも字が小さい、色が見にくい、行間が狭い…

ブログによっては、CSSでデザインを変更したいところがあると思うんですけど
SyntaxHilighterのCSSは wordpressのダッシュボードからでは変更できません

ではどうするか?

SyntaxHighter専用CSSをいじりますっ

SyntaxHighterのCSSファイルがあるのは、こんなところです。

「wp−content」>「plugins」>「syntaxHighlighter」>「syntaxhighterlitgher3」>「styles」

この中にある「shCore.css」と「shThemeDefaulut.css」を変更していきます。

行ごとに色が変わるボーダー柄をなくす

デフォルトでは白とグレーが交互になっていて、色が違っている部分を同じ色にします。

shThemeDefault.css」の20行目〜25行目あたり、
(※お使いの環境によっては記述されている場所が違う場合があるのでご注意を。
.syntaxhighlighter .line.alt1クラスで検索するとすばやく見つかりそうです)

[css]
.syntaxhighlighter .line.alt1 {
background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
background-color: #f8f8f8 !important;
}
[/css]

「.line.alt1」か「.line.alt2」のどちからのbackground-colorを変更すればOKです。

フォントサイズを変更する

bodyなどでフォントサイズを設定していても、syntaxhighlighterのフォントサイズが大きくなってしまったり
小さくなってしまったりする場合があります。

そんなときは「shCore.css」ファイルをいじると変更できます。

「shCore.css」ファイルの50行目、
(※もしくはfont-sizeプロパティで検索して見つけてください)

[css]
font-size: 1em !important;
[/css]

font-size: 1em !important;のところの数値をお好きなサイズに変更すればOKです。

font-sizeプロパティの前後にいろいろといじりがいのあるプロパティも並んでいます。
[css]
background: none !important;
border: 0 !important;
bottom: auto !important;
float: none !important;
height: auto !important;
left: auto !important;
line-height: 1.4em !important;
margin: 0 auto!important;
outline: 0 !important;
overflow: visible !important;
padding: 0 !important;
position: static !important;
right: auto !important;
text-align: left !important;
top: auto !important;
vertical-align: baseline !important;
width: auto !important;
box-sizing: content-box !important;
font-family: Monaco, "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 1.5em !important;
[/css]

必要に応じて、いろいろいじってみるといいかもしれません。
バックアップ必須です。

行間を広げる

デフォルトのままだと、行間が詰まりすぎてちょっとコードが見づらかったりします。
行間をカスタマイズするには、
shCore.css」の35行目、
(※line-heightプロパティを検索しましょう)

[css]
line-height: 1.1em !important;
[/css]

line-height: 1.1em !important;のところの数値をお好きなものに変更すれば、行間の調整ができます。

グリーンな縦罫線の色を変える

行番号とコードを区切るグリーンのラインのカラーも変更できます。
いじるファイルは「shThemeDefault.css」です。

38行目の、.syntaxhighlighter .gutter .lineプロパティを変更します。
(※.syntaxhighlighter .gutter .lineプロパティで検索してみましょう)

[css]
.syntaxhighlighter .gutter .line {
border-right: 3px solid #6ce26c !important;
}
[/css]

こちらのプロパティをいじると、カラーの変更や、ライン自体をドットにしたり、破線にしたり変更可能です。

番号のカラーを変える

いじるファイルは「shThemeDefault.css」です。

shThemeDefault.cssファイルのなかの.syntaxhighlighter.printing .line .contentプロパティを
見つけて(45行目くらいでしょうか)変更していきましょう。

[css]
.syntaxhighlighter.printing .line .content {
border: none !important;
}
[/css]

僕の環境では、デフォルトでこんな感じだったので、
このクラスにいじりたいプロパティを追加したり、変更すれば
syntaxhighlighterの行番号部分が変更されます。

syntaxhighlighter自体の幅を変える

これもいじるファイルは「shCore.css」です。

61行目あたりの.syntaxhighlighterプロパティを変更していきます。
[css]
.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
overflow-y: hidden !important;
font-size: 1em !important;
}
[/css]

widthプロパティでsyntaxhighlighter自体の幅を、
marginプロパティを「0 auto」にすることでセンタリングできたりします。

スポンサードリンク

この記事が気に入ったら
いいね!しよう

Twitter で

PAGE TOP