エンジニア系のブログではよく見るSyntaxHighlighter をアメブロでも使えないか試してみました。
ソースコードとかをブログで見せたいときに、関数や言語の予約語とかがマークアップされて綺麗に表示してくれます。
なお、ここではアメブロのフリープラグインに直接SyntaxHighlighterのコードを埋め込む方法と、以前に「AmebloのフリープラグインのJavaScriptをGoogle codeにホストしたよ 」に書いたGoogle code上にホストする2種類の方法を試してみました。
また、SyntaxHighlighterのJavaScriptファイルなどをアメブロ内にアップロードすることはできないので、何れもホスティングバージョン （無料）を使っています。（後半のほうはホストのホストになりますけど・・・）
SyntaxHighlighterをフリープラグインに埋め込む
まずは、直接フリープラグインに埋め込む方法。
これは、下記のようにホスティング（Amazon S3）されているSyntaxHighlighterのJSやCSSファイルを読み込むことで実現できます。
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("head").append('<link rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" type="text/css" />');
$("head").append('<link rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" type="text/css" />');
function path() {
var args = arguments,
result = [];
for(var i = 0; i < args.length; i++)
result.push(args[i].replace('@', 'http://alexgorbatchev.com/pub/sh/current/scripts/'));
return result
}
SyntaxHighlighter.autoloader.apply(null, path(
'applescript @shBrushAppleScript.js',
'actionscript3 as3 @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',
'groovy @shBrushGroovy.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',
'xml xhtml xslt html @shBrushXml.js'
));
SyntaxHighlighter.all();
});
</script>
コアとなるJavaScriptファイルを読み込んだあとで、jQueryでCSSのロードと言語ごとに必要なJavaScriptファイルをオートロードし、変換するような流れです。
ただし、かなり長いコードなのでフリープラグインの制限（3800文字）にすぐに引っかかってしまうかもしれません。
Google code上にホストしたJavaScriptからSyntaxHighlighterを利用する
この方法は、アメブロに限った話ではなく、他のブログでも同様にJavaScriptをブログ内に直接設置できないという場合の回避策になるかもしれません。
Google codeへのホスト方法は「AmebloのフリープラグインのJavaScriptをGoogle codeにホストしたよ
」を参考にしてみてください。
<script>
$(document).ready(function() {
$("head").append('<link rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" type="text/css" />');
$("head").append('<link rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" type="text/css" />');
$.getScript("http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js", function() {
$.getScript("http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js", function() {
function path() {
var args = arguments,
result = [];
for(var i = 0; i < args.length; i++)
result.push(args[i].replace('@', 'http://alexgorbatchev.com/pub/sh/current/scripts/'));
return result
};
SyntaxHighlighter.autoloader.apply(null, path(
'applescript @shBrushAppleScript.js',
'actionscript3 as3 @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',
'groovy @shBrushGroovy.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',
'xml xhtml xslt html @shBrushXml.js'
));
SyntaxHighlighter.all();
});
});
});
</script>
2011.10.17追記
上記のJavaScriptコードに構文エラーがあったため、修正しました。
こちらは、全てjQueryにて実装しています。
$.getScript()を並列に並べてshCore.jsとshAutoloader.jsを読み込んだらFireFoxではうまく動いたんですがIEだと動作しませんでした。
なので、最初の$.getScript()のコールバックとして$.getScript()を呼び出し、さらにそのコールバックでSyntaxHighlighterの実行をさせています。
SyntaxHighlighterの使い方
preタグもしくはscriptタグでソースを囲むことでコードを整形することができます。
ただし、アメブロはscriptタグが記事内で利用できないのでpreタグを利用するしかありません。
下記のようにclass指定することでその言語にあったマークアップをすることができます。
<pre class="brush: js toolbar: false;" title="コードのタイトル">
「brush:」のあとに記述するクラス名の指定にてshAutoloader.jsが適切な言語のJavaScriptファイルをロードして、その言語にそったマークアップをしてくれます。
「toolbar: false」はヘルプ（？マーク）などを表示したくない場合に指定します。
また、予め幾つかのテーマが存在して、そのCSSの読み込みを変えることで背景やマークアップを変更することができます。
下記は、デフォルトのテーマを定義したshThemeDefault.cssを読み込んだ場合。
$("head").append('<link rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" type="text/css" />');
テーマの一覧は、こちら
を参照。
今回使用したCSSは「shThemeRDark.css」です。
また、上記のように行をハイライト表示することもできます。
<pre class="brush: js toolbar: false; highlight: [3];" title="行をハイライト表示">function foo() {
function foo() {
alert('hello');
}
</pre>
「highlight: [行番号];」を指定することでその行がハイライト表示となります。
ちなみに、バージョン3.0から挙動が変わっているらしく、コードをダブルクリックすると全選択されますので、それでコピーをするみたいです。
ソースをマウスで囲んでコピーしても改行コードがうまくコピーされないため、貼り付けると崩れてしまいます。
使ってみた感想
アメブロで使う場合に限るのかわかりませんが、ちょっとコードを貼り付けるときの作業が多いかなと。
クラス指定もそうなんですが、アメブロの場合は記事内のHTMLタグを直接編集するモードに切り替えると改行が自動で削除されたりします。
それでpreタグ内に貼り付けたコードが崩れ、編集するたびにそこを修正する作業をする必要が出てきたり、面倒な部分も多いです。
また、最近からアメブロの記事プレビュー時にプラグインが反映されなくなっているので、公開前に確認しようということができません。
あとは、jQueryの$(document).ready()を使っているので、body要素が完全に構築され終わったあとで変換がかかってしまいますので、一瞬ですが素のpreタグの状態でコードが見えたあとに切り替わるというような挙動になってしまいます。
ただ、コードが綺麗に表示されるのは見ていても楽しいですし、労力に見合うだけのことはあるかもしれません。
[PR]
[PR]
関連記事
AmebloでSyntaxHighlighterのバージョン2系を利用する方法
SyntaxHighlighterをGoogle code上にホストする
Google Code上にホストしたCSSが適用されない問題の回避方法
Amebaに「なうで紹介」と「mixiチェック」ボタンを追加してみたよ
Amebloに貼り付けていた、はてなブックマークボタンを更新してみたよ
[jQuery] 外部JavaScriptファイル読込みに関する考察