[Blogger] Syntax Highlighter V3 に枠をつけたりとか。

前回の記事で、HTML/JavaScript ガジェットで Syntax Highlighter を設置するところまでできた。

• [Blogger] Syntax Highlighter V3 を JavaScript ガジェットで設置

Syntax Highlighter を設置した時はテーマに Midnight を選択していたが、ちょっとキツイのでデフォルトに戻すことにした。 だが、ページ背景が白で、Syntax Highlighter の背景も白なのでコード部分が目立たないというか境界がわからなくなってしまう。
そこでコード部分に枠をつけてみることにする。

---

せっかく、HTML/JavaScript ガジェット内に収まっているので、全部そこでやってしまう。

<script type='text/javascript'>
  function loadCss(url) {
    var headElem  = document.getElementsByTagName('head')[0]
    var linkElem =document.createElement("link")
    linkElem.rel = "Stylesheet"
    linkElem.type = "text/css"
    linkElem.href = url
    headElem  .appendChild(linkElem)
  }
  loadCss("http://alexgorbatchev.com/pub/sh/current/styles/shCore.css");
  loadCss("http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css");
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type='text/javascript' ></script>

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"  ></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" ></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" ></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js" ></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js" ></script>
<script language='javascript' type="text/javascript"><!--
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.defaults['toolbar'] = false;
  SyntaxHighlighter.defaults['class-name'] = 'syntaxhighlight' ;
  SyntaxHighlighter.all();
// -->
</script>

<style type="text/css">
.syntaxhighlight {
border:3px solid #bbbbff;
width:auto;border-radius:5px;
padding: 3px 0px;
}
</style>

追加したのはハイライトしてある部分。
スタイルで「syntaxhighlight」を追加して、デフォルトの class-name に syntaxhighlight を指定。
枠を描画する際に縦方向に少し padding をつけてある。
実は padding がないときには常に縦スクロールバーが出ていたのだが、padding をつけたら縦スクロールバーもなくなった。

デフォルトの class-name を指定してあるので 記事の方は何も編集する必要はない。

そのほかの設定は以下を参照。

• Syntax Highlighter - Configuration -