あんどろいどいんこ

(っ´∀｀)っ　＜　プログラムのソースを記事に載せるとなんだか見づらい。
(っ´∀｀)っ　＜　よく色んなサイトで見かけるエディタ風な見た目にしたいな。

<ul>
	<li>セキセイ</li>
	<li>オカメ</li>
	<li>コザクラ</li>
</ul>

ということで見つけたのが、WPのPlug-INでSyntaxHighlighterです。
ただ、Version 3.xだと設定画面でツールバーにチェックいれても表示されませんでした。

# 参考サイト　（導入方法　＆　version 2.x と 3.x の違い）
ソースコードの表示を整えてくれるプラグイン「SyntaxHighlighter Evolved」

# 参考サイト　（設定方法　＆　使い方）
SyntaxHighlighter Evolved の使い方 (設定＆記述例)

そしてデフォルトだと行間がとても狭いため、眉間に皺が寄ってしまいます。
その部分を含め、レイアウトを何箇所かカスタマイズしたいので調べてみました。

# 参考サイト
SyntaxHighlighter Evolvedのデザインをカスタマイズする

まるっとコチラで紹介されていたコードをいただき、更に少しカスタマイズして使っています。

・行の背景色を交互に表示したい。→　ボーダー柄にしたい。
・タイトルをSource Codeではなくその都度、指定したい。
・ハイライトの色を変えたい。

※変更するファイル:wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shThemeDefault.css
※Version3.xのDefaultを使用中

ということで一部変更したのがコチラ↓

.syntaxhighlighter .line.alt1 {
　　　background-color: #eee !important; 　　/** 色を変更 **/
}
.syntaxhighlighter .line.alt2 {
　　　background-color: #fff !important; 　 /** 色を変更 **/
}

↑の行背景と↓のハイライト変更は初めから書いてあるCSSを変更しています。

.syntaxhighlighter .line.highlighted.alt1,
.syntaxhighlighter .line.highlighted.alt2 {
　　　background-color: #ffff66 !important;　　　 /** コード内のハイライト色 **/
}
.syntaxhighlighter .gutter .line.highlighted {
　　　background-color: #ffff66 !important; /** 行番号のハイライト色 **/
　　　color: black !important; /** ハイライトが掛かった場合の行番号の文字色 **/
}

以下は、上記サイトで紹介されていたコード内での変更です。

.syntaxhighlighter:before /*タイトル部分追加*/{
　　　display: block !important;
　　　/** content: "Source Code"; **/
　　　/** タイトルが"Source Code"で統一されてしまうため削除 **/
　　　color: #6f6e69 !important;
　　　￤/*省略*/
}
.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span{
　　　line-height: 1.5em !important; 　　　　/*行間調整*/
}
.syntaxhighlighter{
　　　padding: 1px !important;
　　　/** background: #fff !important; 外周背景色 **/
　　　/** これがあるとタイトルの背景色がグレーではなくなってしまうため削除　**/
}

Version3.xでのツールバーの表示がどうしてもわかりませんでした。
Version2.xを使うとツールバーは表示されるのですが、今度はタイトルが表示されない…
いやはや・・・CSSやJSのコード見てもサッパリ＼(^O^)／でした。