会社のブログサイトよりプログラムのトピックスは、こちらのブログに移行しました。
プログラム用にコードが多いので、
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/
でした。
