(っ´∀`)っ < プログラムのソースを記事に載せるとなんだか見づらい。
(っ´∀`)っ < よく色んなサイトで見かけるエディタ風な見た目にしたいな。
<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^)/でした。