BloggerのSyntaxHighlighterでObjective-Cを表示する方法

SyntaxHighlighterでObjective-Cのコードはそのままでは利用できない。
そこで、新たにスクリプトとBrushファイルを自分で追加してObjective-Cでも正しくハイライト表示できるようにする。
BloggerへのSyntaxHighlighterの導入方法はこちらを参照

1.Objective-C用のBrushファイルを用意する

元々Objective-C用のBrushファイルが用意されていない。そこでこちらで入手したObjective-C用のBrushファイルを使わせてもらった。入手したコードが以下になる。
SyntaxHighlighter.brushes.ObjC = function()
{
 var datatypes = 'char bool BOOL double float int long short id void';
 
 var keywords = 'IBAction IBOutlet SEL YES NO readwrite readonly nonatomic nil NULL ';
 keywords += 'super self copy ';
 keywords += 'break case catch class const copy __finally __exception __try ';
 keywords += 'const_cast continue private public protected __declspec ';
 keywords += 'default delete deprecated dllexport dllimport do dynamic_cast ';
 keywords += 'else enum explicit extern if for friend goto inline ';
 keywords += 'mutable naked namespace new noinline noreturn nothrow ';
 keywords += 'register reinterpret_cast return selectany ';
 keywords += 'sizeof static static_cast struct switch template this ';
 keywords += 'thread throw true false try typedef typeid typename union ';
 keywords += 'using uuid virtual volatile whcar_t while';
 // keywords += '@property @selector @interface @end @implementation @synthesize ';
 
  
 this.regexList = [
  { regex: SyntaxHighlighter.regexLib.singleLineCComments, css: 'comments' },          // one line comments
  { regex: SyntaxHighlighter.regexLib.multiLineCComments,  css: 'comments' },          // multiline comments
  { regex: SyntaxHighlighter.regexLib.doubleQuotedString,  css: 'color3' },   // double quoted strings
  { regex: SyntaxHighlighter.regexLib.singleQuotedString,  css: 'color3' },   // single quoted strings
  { regex: new RegExp('^ *#.*', 'gm'),      css: 'variable' },          // preprocessor
  { regex: new RegExp(this.getKeywords(datatypes), 'gm'),  css: 'functions' },         // datatypes
  { regex: new RegExp(this.getKeywords(keywords), 'gm'),  css: 'functions' },   // keyword
  { regex: new RegExp('\\bNS\\w+\\b', 'g'),     css: 'constants' },   // keyword
  { regex: new RegExp('\\bUI\\w+\\b', 'g'),     css: 'constants' },   // keyword
  { regex: new RegExp('\\bCG\\w+\\b', 'g'),     css: 'constants' },   // keyword
  { regex: new RegExp('@\\w+\\b', 'g'),      css: 'functions' },   // keyword
  ];
 
}

SyntaxHighlighter.brushes.ObjC.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.ObjC.aliases = ['objc', 'obj-c'];


2.入手したBrushファイルのコードをBroggerのHTMLファイルに埋め込む

本来、新たに入手したBrushファイルをBlogにアップロードして用いるべきだが、Broggerはファイルのアップロードに対応していない。そこで、BloggerのDashbord>テンプレート>HTMLの編集と進み、すでに追加したSyntaxHighlighterのスクリプト部分に1.のBrushファイルのコードを貼り付ける。HTMLへの記述方法は以下になる。 

すでに追加したSyntaxHighlighterのスクリプトの<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript"><script language="javascript">のタグ間に、新たに<script></script>を記述する。
続いて、1.のBrushファイルのコードをコピーし追加した<script></script>の間にペーストする。
<script src='http://alexgorbatchev.com/ã〜.js' type='text/javascript'/>
<script>
ここにBrushファイルのコードを貼り付ける
</script>
<script language='javascript' type='text/javascript'>

3.Objective-Cのコードを投稿する

投稿の再、Aliasesの部分を"objc"に変え、<pre class="brush:objc"></pre>タグでコードを囲めばSyntaxHighlighterでObjective-Cが表示できる。


参考にしたサイト
アプリ開発の記録 SyntaxHighlighterでObjective-Cをきれいに表示
Smart Gadget Laboratory: Objective-CのSyntaxHighlighterをBloggerで利用できるようにする

コメント

  1. So-netでブログをやっております。参考にさせていただきました。
    良い記事をありがとうございます。

    返信削除

コメントを投稿