Blogger:SyntaxHighlighter(8)jQuery用のBrushを導入

前の関連記事：Blogger:SyntaxHighlighter(7)DOSコマンドをきれいに表示させる

DOSコマンドのBrushファイルを探しているときに出会ったログろいどさんのページでｊQueryのBrushファイルも見つけました。これも導入することにしました。

JavascriptのBrushファイルではｊQueryのハイライトが不十分だった問題が解決

SyntaxHighlighter用タグ 変換/生成ツール - ログろいど

ここでログろいどさん作成のBrushを含めてすべてのSyntaxHighlithterのBrushの結果をみれます。

コードを貼り付けた後オプションの「brush」でBrushを選択します。

「作成」ボタンをクリックするとその下の「SyntaxHighlighterタグ」にコードが表示されたらさらに下にある「プレビュー」ボタンをクリックするとハイライトされたコードが表示されます。

ｊQueryのコードのハイライトが少ないなあ、と思っていたので早速導入させて頂きます。

[SyntaxHighlighter] jQuery用Brush (jQuery 1.9対応版) - ログろいどよりshBrushJQuery.min.jsをダウンロードしました。

あとはBrushファイルを環境にあわせてアップロードしてエイリアスにjqかjqueryを指定するだけです。

このブログではBlogger:SyntaxHighlighter(7)DOSコマンドをきれいに表示させるのshBrushJScript.jsと同様にしました。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<button id="btn1">未完</button><button id="btn2">完了</button><button id="btn3">失敗</button><br />
<div id="df_ex"></div>
<script>
var df1 = $.Deferred();
function fn1(n) {
    $( "#df_ex" ).append(df1.state()+n+"<br/>");
  }
function fn2(n) {
  var n2="で.alwaysも実行";
  fn1(n);
  return  $.when(
             fn4(n2),
             $( "#df_ex" ).animate(
               {width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em"},
               {duration:1500, easing: "linear"}
               ))
  }
function fn4(n2){
    var df4=$.Deferred();
    df4.resolve(n2)
    return df4;
  }
df1
 .then(fn2,fn2,fn1)
 .always(fn1)
$( "button#btn1" ).on( "click", function() {
  df1.notify("で.progress実行");
});
$( "button#btn2" ).on( "click", function() {
  df1.resolve("で.done実行");
});
$( "button#btn3" ).on( "click", function() {
  df1.reject("で.fail実行");
});
</script>

以下のJavascriptのBrushファイルに比べるとピンクの部分が増えていますね。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<button id="btn1">未完</button><button id="btn2">完了</button><button id="btn3">失敗</button><br />
<div id="df_ex"></div>
<script>
var df1 = $.Deferred();
function fn1(n) {
    $( "#df_ex" ).append(df1.state()+n+"<br/>");
  }
function fn2(n) {
  var n2="で.alwaysも実行";
  fn1(n);
  return  $.when(
             fn4(n2),
             $( "#df_ex" ).animate(
               {width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em"},
               {duration:1500, easing: "linear"}
               ))
  }
function fn4(n2){
    var df4=$.Deferred();
    df4.resolve(n2)
    return df4;
  }
df1
 .then(fn2,fn2,fn1)
 .always(fn1)
$( "button#btn1" ).on( "click", function() {
  df1.notify("で.progress実行");
});
$( "button#btn2" ).on( "click", function() {
  df1.resolve("で.done実行");
});
$( "button#btn3" ).on( "click", function() {
  df1.reject("で.fail実行");
});
</script>

JavascriptのBrushのエイリアスをｊQueryのBrushのものに変更してしまう

<pre class="brush: js;">// ココにソースを記述</pre>

いままでこうやって記述してきた部分をさかのぼってjqに書き換えるのがわずらわしいのでもうjsをjQueryのBrushのエイリアスにしてしまうことにしました。

まずshBrushJScript.jsからjsのエイリアスを削除します。

Brush.aliases=['js','jscript','javascript'];

を

Brush.aliases=['jscript','javascript'];

としました。

次にshBrushJQuery.min.jsにjsのエイリアスを追加します。

a.aliases=["jq","jquery","jQuery"];

を

a.aliases=["js","jq","jquery","jQuery"];

としました。

これでこれまでjsのエイリアスでshBrushJScript.jsが適用されていたものがshBrushJQuery.min.jsが適用されるようになりました。

参考にしたサイト

SyntaxHighlighter用タグ 変換/生成ツール - ログろいど
ログどいどさんが作ったBrushファイルの結果を試せます。

[SyntaxHighlighter] jQuery用Brush (jQuery 1.9対応版) - ログろいど
jQuery用のBrushファイルです。

次の関連記事:Blogger:SyntaxHighlighter(9)bash, shellのBrushを追加する