Blogger に Syntax Highlighterを導入する

会社のブログサイトよりプログラムのトピックスは、こちらのブログに移行しました。

プログラム用にコードが多いので、Syntax Highlighter の様なものが用意されたブログはないか探していたら、

BloggerにソースコードをハイライトするSyntaxHighlighterを導入する

という記事を見つけたので早速試してみます。
が、Syntax Highlighter Scripts Generator　が404のリンク切れ。
上記ジェネレーターは駄目なようなので、まずはブログ記事内のジェネレート済みのコードを流用しますた。

Bloggerの管理画面→テンプレート→HTMLの編集　へ
</head> の上に先ほどのジェネレート済みのコードを貼り付けます。

なお、先のブログにあるように縦スクロールバーを消す等のカスタマイズはshCore.cssを変更しまが、BloggerはCSSファイル等のアップロードができないので、先ほどのジェネレート済みのコードの一行目
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
は貼り付けず、http://alexgorbatchev.com/pub/sh/current/styles/shCore.cssのCSSをコピーして、
Blogger設定画面＞テンプレート＞カスタマイズ＞上級者向け＞CSSを追加　へ貼り付けしてから変更します。

Javaのコードテスト

import org.apache.cordova.api.CordovaPlugin;
import org.apache.cordova.api.CallbackContext;
import org.json.JSONArray;
import org.json.JSONException;
import android.util.Log;

public class HelloPlugin extends CordovaPlugin {
    public static final String NATIVE_ACTION_STRING="nativeAction";
    public static final String SUCCESS_PARAMETER="success";

    @Override
    public boolean execute(String action, JSONArray data,
 CallbackContext callbackContext)throws JSONException {
           Log.d("HelloPlugin", "Hello, this is a native function called from PhoneGap/Cordova!");
           //only perform the action if it is the one that should be invoked
           if (NATIVE_ACTION_STRING.equals(action)) {
                 String resultType = null;
                 try {
                       resultType = data.getString(0);
                 }
                 catch (Exception ex) {
                       Log.d("HelloPlugin", ex.toString());
                 }
                 if (resultType.equals(SUCCESS_PARAMETER)) {
                  callbackContext.success("Yay, Success!!!");
                  return true;
                 }
                 else {
                  callbackContext.success("Oops, Error :(");
                  return true;
                 }
           }
           return false;
    }
}

できたぜ。

Bloggerに投稿する際はHTML編集にしないと駄目です。また、プレビューでは表示されません。
記事内でpreタグを使い、class="brush: alias;"　としてコードを記述します。
なお。alias には様々な言語が入ります。一覧はこちら
結局、java, C++、CSS, javascript, Perl, PHP, プレーンテキスト、HTML（XML)を読み込むようにしました。

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

をBloggerの管理画面→テンプレート→HTMLの編集　より　</head> の上にコードを貼り付けました。
ページのサイズを変更したら上記の記述が吹っ飛びました。
再度Bloggerの管理画面→テンプレート→HTMLの編集から貼り付けました。
また、言語用スクリプトはサイズが小さい(5kバイト以下)ので気にしないでどんどんはってもよさそうです。

つかったものの一覧

使用言語	Brush aliases	file name
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java,	shBrushJava.js
Perl	perl, pl,	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text,	plain, text	shBrushPlain.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

jQuery 1.9対応などはログろいどにありました。
ファイルアップできないので直接記述かな？

なお、本家からスクリプトのダウンロードは
http://alexgorbatchev.com/SyntaxHighlighter/download/
でした。