BloggerにSyntaxHighlighterを導入する手順

今回はブログにソースコードを綺麗に表示する方法を一つ紹介します。ソースコードを綺麗に表示する方法はいろいろあると思いますが、SyntaxHighlighterを使う方法について説明します。　

１．テンプレートの編集

①．Bloggerの管理画面を開いて、テンプレートの「HTMLの編集」画面を開きます。

②．HTMLの編集画面にて、「</head>」を検索する。

③．「</head>」の上に、以下のを追加する。

	<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/shThemeRDark.css' rel='stylesheet' type='text/css'/>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
	<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
	<script language="javascript" type="text/javascript">
	SyntaxHighlighter.config.bloggerMode = true;
	SyntaxHighlighter.defaults[&#39;toolbar&#39;] = false;
	SyntaxHighlighter.all();
	</script>

view raw SyntaxHighlighterForBlogger hosted with ❤ by GitHub

④．追加後のイメージは以下になります。

２．投稿する際の記載方法

①．投稿する際に、直接「作成」タブに記載するのではなく、「HTML」タブ中に、以下の<pre>タグ中にソースコードを記載する。「alias」には対象ソースの言語を指定します。例えば、CSSはCSS、JavaScriptはjs、xmlはxml、Javaはjavaになります。
※ソースコードに「<」が入っている場合、「<」を「&lt;」に置換しないと行けません。
このHTMLエスケープツールを使えば、簡単にエスケープしてくれると思います。

 <pre class="brush: alias;">
// ココにソースを記述
</pre>

３．対応のソース言語のalias一覧

対応言語	キーワード 複数あるものは、どれか1つをチョイス
ActionScript3	as3, actionscript3
Bash/shell	bash, shell
ColdFusion	cf, coldfusion
C#	c-sharp, csharp
C++	cpp, c
CSS	css
Delphi	delphi, pas, pascal
Diff	diff, patch
Erlang	erl, erlang
Groovy	groovy
JavaScript	js, jscript, javascript
Java	java
JavaFX	jfx, javafx
Perl	perl, pl
PHP	php
Plain Text	plain, text
PowerShell	ps, powershell
Python	py, python
Ruby	rails, ror, ruby
Scala	scala
SQL	sql
Visual Basic	vb, vbnet
XML	xml, xhtml, xslt, html, xhtml