[SyntaxHighlighter]デザインのカスタマイズ

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

<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^)/でした。

    ↓いつもありがとうございます★ポチは更新の励みになります★↓
  • Twitter
  • にほんブログ村 鳥ブログ セキセイインコへ
  プロフィール  PR:無料HP  スルガ自動車学校  給与滞納  Webデザイン 専門学校  エンドレス・アドバンス  タイヤ 寿命  タイヤ 取り付け  建築 専門学校  マツダ  民泊 運用  改装工事  投資顧問ベストプランナー  中古ホイール 豊橋市  バイアグラ 評判