BloggerでSyntaxHighlighterを使う。

CにしてもPythonにしてもなんにしても、Bloggerでソースコードを貼り付けるのは<pre />タグを使っても面倒だったりします。

以前にWordPressでやっていたときには、Crayon Syntax Highlighterを使っていました。最近はCDN（Content Delivery Network）という仕組みを使って、サーバにインストールしなくてもCDNへのリンクでスタイルシートや.jsファイルをロードできるので、管理がずいぶんと楽になってきています。

早速、SyntaxHighlighterを使ってソースコードをきれいにできないかとやってみました。"syntaxHighligher cdn" で検索してみると、CDNJS.COMに記述がありました。ここから必要なファイルへのリンクを拾ってきて、Bloggerのテーマファイルにコピペしてやることで使えるようになるはずです。

必要なファイルは、

• shCore.js
• shCore.css
• shThemeDefault.css
• 必要な言語のBrushファイル

です。

ファイルリストの右側にあるコピーボタンをクリックすると、"Copy Script Tag" というメニューが出るので、これでコピーしてからテーマファイルにペーストしていきます。ここでは定義は以下のようにしました。

<!-- SyntaxHighligher scripts and css -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.css" />

<!-- Brush files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushDiff.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPowerShell.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js"></script>

<!-- bloggerで使用可能にする -->
<script type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all()
</script>

最後の bloggerMode については、公式のConfigurationを参照。

これをBloggerのテーマの </head>タグの直前に置きます。

ソースコードを書くときは

<pre class="brush:cpp; ruler:true; first-line:5; highlight:[7-9]"> ソースコード </pre>

みたいな感じです。