Bloggerでsyntax highlightを使う方法

コードを見やすくするために、ブログのコードに対してシンタックスハイライトの適用はいつかやりたいと思っていました。
ついにSyntaxHighlighterというシンタックスハイライト用のテーマを適用できたので、メモを残します。

ファイルの読み込み

下記のコードをブログテンプレートの</head>の直前に記述しました。

    <!-- design files -->
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

    <!-- core file -->
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>

    <!-- language brushes -->
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>


    <!-- trigger syntax highlighter -->
    <script type="text/javascript">
        SyntaxHighlighter.config.bloggerMode = true;
        SyntaxHighlighter.all()
    </script>

自分はbash, cpp, js, xmlの適用ファイルを設置しました。

参考コミット: Include syntaxHighlighter

ほかの言語を使う方は、言語の設定(brush)ファイルを設置してください。
テーマも変えられます。

Themes
Bundled Brushes

syntax highlighterの適用

このように記述すると、

<pre class="brush:cpp">
void main() {
  return 0;
}
</pre>

デフォルトの表示はこうなります

styleの変更

色が付いて見やすくなったのは良いのですが、デフォルトでは枠線が無く、背景が白いとどこからどこまでがコードなのか個人的に分かりにくいです。

そのため、下記のstyleをブログテンプレートに追加しました。
.syntachighlighterのwidth要素を上書きしたいので、bodyから記述しています。

body .syntaxhighlighter {
  margin: 5px 0;
  border: 1px dashed rgb(47, 111, 171);
  padding: 1em;
  width: calc(100% - 2em) !important;
}

これにより、こうなります。

void main() {
  return 0;
}

長いコードも見やすくなりそうで嬉しいです。

参考

bloggerでSyntaxHighlighterを表示する方法

更新履歴

2017.04.06
「styleの変更」を追加しました。
jsに関するファイル名を間違えていたので、訂正しました。