BloggerにSyntaxHighlighterを導入してみる

まずはテーマ決め

レイアウトとテンプレートを決める。好きにすればいい。 個人的には緑が好きなので、白基調緑アクセントな感じで。 眼が疲れないのがいいよ。

では本題

参照：http://wada811.blogspot.com/2012/02/bloggersyntaxhighlighter.html

Syntax Highlighter Scripts Generator

http://www.way2blogging.org/widget-generators/syntax-highlighter-scripts-generator

Djangoテーマで適当にブラシを選択。 そしてGenerate

そしてCopy

Bloggerテンプレート/HTMLの編集

"<title><data:blog.pageTitle/></title>"の下にPaste。場所間違えると次のカスタマイズができなくなる。

？ボックスを消すために"SyntaxHighlighter.defaults["toolbar"] = false;"なんかも入れておく。

Bloggerテンプレート/カスタマイズ

「上級者向け」の「CSSを追加」でCSSカスタマイズ。

縦スクロールバーを消して背景を透明化&縞模様。

.syntaxhighlighter {
  background-color: transparent !important;
  overflow-y: hidden !important;
}

.syntaxhighlighter .line.highlighted.alt1,
.syntaxhighlighter .line.highlighted.alt2 {
  background-color: rgba(65,168,62,0.8) !important; /*#41a83e*/
}

.syntaxhighlighter .line.alt1 {
  background-color: rgba(10,43,29,0.4) !important; /*#0a2b1d*/
}

.syntaxhighlighter .line.alt2 {
  background-color: rgba(10,43,29,0.6) !important;
}

以上。