Syntax Highlighter 3.0でLogcatのハイライト表示を自作する手順

Logcatをハイライト表示させるだけならば、「BloggerでLogcatのハイライト表示をさせる手順」でかまいませんが、人のサイトのスクリプトを拝借しているのはちょっと…、という人やLogcat以外にも自分でハイライト表示をカスタマイズしたい！という人がいると思います。

以下に、Syntax Highlighter 3.0のスクリプトに自作のスクリプトを入れハイライト表示をするやり方を示します。

このやり方ができれば、Logcatに限らず好きなソースコードのハイライト表示をカスタマイズできます。
またサイトはBlogger向けですが、項目６、７のHTMLテンプレートの書き換えさえできれば、ブログに限らずどんなサイトでも適用できます。

１.まず最初にローカルのパソコンで以下のJavaScriptファイルを作成してください。
ファイル名は「shBrushLogcat.js」です。

;(function()
{
	// CommonJS
	typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;

	function Brush()
	{
		this.regexList = [
            { regex: /^.*ERROR\/.*$/gm,		css: 'error' },
            { regex: /^.*DEBUG\/.*$/gm,		css: 'debug' },
            { regex: /^.*WARN\/.*$/gm,		css: 'warn' },
            { regex: /^.*INFO\/.*$/gm,		css: 'info' },
            { regex: /^.*VERBOSE\/.*$/gm,		css: 'verbose' },
 
            { regex: /^E\/.*$/gm,		css: 'error' },
            { regex: /^D\/.*$/gm,		css: 'debug' },
            { regex: /^W\/.*$/gm,		css: 'warn' },
            { regex: /^I\/.*$/gm,		css: 'info' },
            { regex: /^V\/.*$/gm,		css: 'verbose' },            
            
			];
	};

	Brush.prototype	= new SyntaxHighlighter.Highlighter();
	Brush.aliases	= ['logcat', 'lc'];

	SyntaxHighlighter.brushes.logcat = Brush;

	// CommonJS
	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
})();

２.SyntaxHighlighterをここからダウンロードします。
３.ダウンロードしたzipファイルを解凍して、出来上がったフォルダ（現在は「syntaxhighlighter_3.0.83」）の中に「scripts」フォルダがあるので「shBrushLogcat.js」を入れます。

「scripts」フォルダに自作スクリプト「shBrushLogcat.js」を入れておく。

４.「style」フォルダ内に「shThemeEclipse.css」がありますので、「shThemeEclipse.css」ファイルの最下行に以下のCSS記述を追加します。

.syntaxhighlighter .error, .syntaxhighlighter .error a {
  color: #ff0000 !important; /* ERRORは赤 */
}
.syntaxhighlighter .warn, .syntaxhighlighter .warn a {
  color: #ff7f00 !important; /* WARNINGはオレンジ */
}
.syntaxhighlighter .debug, .syntaxhighlighter .debug a {
  color: #00007f !important; /* DEBUGは青 */
}
.syntaxhighlighter .info, .syntaxhighlighter .info a {
  color: #007f00 !important; /* INFOは緑 */
}
.syntaxhighlighter .verbose, .syntaxhighlighter .verbose a {
  color: #000000 !important;  /* ERRORは黒 */

５．解凍したフォルダ「syntaxhighlighter_3.0.83」をFTPで公開サーバにアップロードします。
今回は「syntaxhighlighter_3.0.83」フォルダを「current」にして、「pub/sh/current」ディレクトリ内にアップロードしています。

FOO.BARサーバの pub/sh/currentディレクトリ内にスクリプトを配置

６．テンプレートHTMLの</head>タグの行を検索し、その上の行に以下のソースを貼付けます。
URLのFOO.BARの部分は、自分のサイトに読み替えてください。

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

今回はテーマが「Eclipse」なので「shThemeEclipse.css」ですが、デフォルトのテーマを使っている場合は「shThemeDefault.css」に上記CSS記述を追加します。どのテーマを使っているかは、以下のテンプレートHTMLの記述で判別してください。</head>タグの1行上です。

<link href="http://FOO.BAR/pub/sh/current/styles/shThemeEclipse.css" rel="stylesheet" type="text/css"></link>

デフォルトのテーマを使う場合、以下のようになります。

<link href="http://FOO.BAR/pub/sh/current/styles/shThemeDefault.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テンプレートを保存したら、作業完了です。