BloggerでLogcatのハイライト表示をさせる手順

Bloggerのブログ上にSyntax Highlighter 3.0を使ってLogcatをハイライト表示させる方法について、だいたいやるべきことがわかりましたので、ここに手順を示します。

現在Syntax Highlighter 3.0スクリプト自体は、自前のレンタルサーバにいれてあります。
この手順をそのまま使う方は、わたしのレンタルサーバを参照する事になります。
ですんで、期間限定になると思ってください（ただ今のところ変更する予定はありません）。

スクリプトへの参照URLを読み替えていただくとご自身のサーバで利用できます。
Googleサイトなどに配置するのがいいやり方になるかと思いますが、ディレクトリごとアップロードに対応していなかったように思います。各自調べて対応お願いします。

１．Blogger管理画面にて、「デザイン」タブの「HTMLを編集」をクリックして、テンプレートを編集します。

管理画面で直接編集するよりも、「テンプレートをすべてダウンロード」をクリックしてパソコンにXMLファイルとして保存し、テキストエディタで編集した方がいいと思います。

２．まず、</head>タグの行を検索し、その上の行に以下のソースを貼付けます。

<script src="http://sh.xmit.org/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://sh.xmit.org/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>
<link href="http://sh.xmit.org/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://sh.xmit.org/pub/sh/current/styles/shThemeEclipse.css" rel="stylesheet" type="text/css"></link>

３．次に、</body>タグの行を検索し、その上の行に以下のソースを貼付けます。

<script language="javascript" type="text/javascript">
function path() { 
 	var args = arguments, 
    	 result = [] 
     	; 

 	for(var i = 0; i &lt; args.length; i++) 
     	result.push(args[i].replace('@', 'http://sh.xmit.org/pub/sh/current/scripts/')); 
       
 	return result 
}; 
SyntaxHighlighter.autoloader.apply(null, path( 
'actionscript3 as3      @shBrushAS3.js' ,
'bash shell             @shBrushBash.js' ,
'coldfusion cf          @shBrushColdFusion.js' , 
'c# c-sharp csharp      @shBrushCSharp.js' , 
'cpp c                  @shBrushCpp.js' , 
'css                    @shBrushCss.js' , 
'delphi pascal          @shBrushDelphi.js' , 
'diff patch pas         @shBrushDiff.js' , 
'erl erlang             @shBrushErlang.js',
'groovy                 @shBrushGroovy.js',
'java                   @shBrushJava.js',
'jfx javafx             @shBrushJavaFX.js',
'js jscript javascript  @shBrushJScript.js',
'logcat lc			@shBrushLogcat.js',
'perl pl                @shBrushPerl.js',
'php                    @shBrushPhp.js',
'text plain             @shBrushPlain.js',
'ps powershell  	@shBrushPowerShell.js' , 
'py python              @shBrushPython.js',
'ruby rails ror rb      @shBrushRuby.js',
'sass scss              @shBrushSass.js',
'scala                  @shBrushScala.js',
'sql					@shBrushSql.js' , 
'vb vbnet               @shBrushVb.js' , 
'xml xhtml xslt html	@shBrushXml.js'
));
	SyntaxHighlighter.config.bloggerMode = true;
	SyntaxHighlighter.all();
</script>

</head>タグの前には最低限読み込む必要のあるファイルを指定し、</body>タグの前には必要なスクリプトだけ呼び出すautoloader機能を記述しています。

HTMLテンプレートを保存したら、作業完了です。

動作確認

後は、preタグにclass属性を行えば利用可能になります。
以下のように投稿欄に入れてみてください。

<pre class="brush:logcat">
08-30 22:41:09.394: INFO/recovery(89): Recovery image already installed 
08-30 22:41:09.398: DEBUG/Vold(70): Volume sdcard state changing -1 (Initializing) -> 0 (No-Media)
08-30 22:41:09.433: DEBUG/Vold(70): Volume sdcard state changing 0 (No-Media) -> 2 (Pending)
08-30 22:41:09.433: DEBUG/Vold(70): Volume sdcard state changing 2 (Pending) -> 1 (Idle-Unmounted)
08-30 22:41:09.613: WARN/Vold(70): Ignoring unknown switch 'usb_connected'
</pre>

以下のようにlogcatの内容がハイライト表示されます

08-30 22:41:09.394: INFO/recovery(89): Recovery image already installed 
08-30 22:41:09.398: DEBUG/Vold(70): Volume sdcard state changing -1 (Initializing) -> 0 (No-Media)
08-30 22:41:09.433: DEBUG/Vold(70): Volume sdcard state changing 0 (No-Media) -> 2 (Pending)
08-30 22:41:09.433: DEBUG/Vold(70): Volume sdcard state changing 2 (Pending) -> 1 (Idle-Unmounted)
08-30 22:41:09.613: WARN/Vold(70): Ignoring unknown switch 'usb_connected'

class属性の記述法は改めてまとめます。