2011年10月9日日曜日

 やっとできた。。。Blogger + sites.google.com で Syntax Highlighter

Blogger + sites.google.com で Syntax Highlighter の適用がようやくできた。。。
FaziBear's Blogger Widgetsの「Add-widget」がクロスサイトスクリプトのチェックに引っかかることから始まり、CSSがコメントアウトされているところまで紆余曲折でした。 

(
SyntaxHighlighter
version 3.0.83 (July 02 2010)
)

適用手順は以下の通り。
1. SyntaxHighlighter をダウンロード
2. site.google.com のご自身のページに以下のファイルをアップロード
    style/shCore.css
    style/shThemeDefault.css
    scripts/shAutoloader.js
    scripts/shCore.js
    scripts/shBrushXXX.js ←使用したい言語に対応するファイル。複数あればそれら全てをアップロードする。
    
    アップロードしたファイルのパスを確認。
    http://sites.google.com/XXX/files/shCore.css など
    ※以下の例では、「 http://sites.google.com/XXX/files」を<url>として置き換えています。

3.  BloggerにSyntaxHighlighterのCSSを登録
    Blogger → テンプレート → HTMLの編集
    ※カスタマイズ → アドバンス → CSSの追加　でもCSSの追加ができるはずだが、実際にはコメントアウトされてしまいうまくいかなかった。リンクではなくCSSの内容をそのまま書かなければならなかったのかと今、思う。

4. <head>〜</head>に以下のCSSを追加
  … 
    <link rel='stylesheet' type='text/css' href='<url>/shCore.css'/>
    <link rel='stylesheet' type='text/css' href='<url>/shThemeDefault.css'/>
  … 
 
     ※<url> 部分に２でメモったパスを入力してください。


5. レイアウトにJavaScriptを追加
    レイアウトを開き「ガジェットを追加」をクリック。
    HTML/JavaScript をクリック。
    「コンテンツ」に以下を入力。（詳細はSyntaxHighlighterのAutoloader参照）
     ※<url> 部分に２でメモったパスを入力してください。(3箇所)
<script src="<url>/shCore.js" type="text/javascript"></script>
<script src="<url>/shAutoloader.js" type="text/javascript"></script>

<script type="text/javascript">
function sh_path()
{
  var args = arguments,
      result = [];
 
  for(var i = 0; i < args.length; i++) {
    result.push(args[i].replace('@','<url>/'));
  }
  return result;
}

SyntaxHighlighter.autoloader.apply(null, sh_path(
  'applescript            @shBrushAppleScript.js',
  'actionscript3 ac3      @shBrushAS3.js',
  'bash shell             @shBrushBash.js',
  'coldfusion cf          @shBrushColdFusion.js',
  'cpp c                  @shBrushCpp.js',
  'c# c-sharp csharp      @shBrushCSharp.js',
  'css                    @shBrushCss.js',
  'delphi pascal          @shBrushDelphi.js',
  'diff patch pas         @shBrushDiff.js',
  'erl erlang             @shBrushErlang.js',
  'java                   @shBrushJava.js',
  'jfx javafx             @shBrushJavaFX.js',
  'js jscript javascript  @shBrushJScript.js',
  'perl pl                @shBrushPerl.js',
  'php                    @shBrushPhp.js',
  'text plain             @shBrushPlain.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>
6.ブログで使用
以上で準備OK.　実際にソースコードをハイライトしたい場合は、以下のように<pre> でソースコード部分を囲む。

<pre class="brush: csharp">
public static void Hoge()
{
    MessageBox.Show("foo");
}
</pre>
Posted by

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)