Blogger:SyntaxHighlighter(9)bash, shellのBrushを追加する

前の関連記事：Blogger:SyntaxHighlighter(8)jQuery用のBrushを導入

Blogger:SyntaxHighlighter(7)DOSコマンドをきれいに表示させるのときと違ってshBrushBash.jsは圧縮されていないのでまず圧縮してからBloggerテンプレートに貼り付けます。

shBrushBash.jsの中身を圧縮する

個別のBrushファイルをダウンロードすることはできないようですので、SyntaxHighlighter - Downloadからsyntaxhighlighter_3.0.83を丸ごとダウンロードしてその中のscriptsフォルダにあるshBrushBash.jsをワードパッドで開きます。

Blogger:圧縮ツールを使ってCSSとJavaScriptを圧縮するで使った/packer/にshBrushBash.jsの中身を貼り付けます。


「Shrink variables」のみにチェックをつけておきます。

「Pack」ボタンをクリック。

compression ratio: 2030/2498=0.813

2割弱圧縮されましたね。

HTML/JavaScriptガジェットへ圧縮したshBrushBash.jsの中身を貼り付ける

どのHTML/JavaScriptガジェットへ入れればよいのだっけ？

一つずつ中身を確認してようやく探し当てました。

Blogger：レイアウト編集(10)ウィジェットのIDを確認する方法でwidgetID=HTML5と確認しました。

<style>
shCore.cssの中身。
shThemeDefault.cssの中身。
flexcrollstyles.cssの中身。
</style>
<script>
shCore.jsの中身。
shBrushXml.jsの中身。
shBrushCss.jsの中身。
shBrushPython.jsの中身。
shBrushBat.min.jsの中身。
shBrushJQuery.min.jsの中身。
shBrushBash.jsの中身。
  SyntaxHighlighter.config.bloggerMode = false;
  SyntaxHighlighter.defaults['toolbar'] = false;
  SyntaxHighlighter.defaults['auto-links'] = false;
  SyntaxHighlighter.defaults['class-name'] = "flexcroll_height";
  SyntaxHighlighter.all();
  $(window).load(function () {
     $.each($('.flexcroll_height'), function(){$(this).height($(this).find("table").height()+17);});
     $('.flexcroll_height').addClass("flexcroll");
     });
flexcroll.jsの中身。
</script>

こういう構成になっているはずなので13行目に挿入しました。

ちゃんと//shBrushBash.jsのようにコメントを入れておかないとあとで全然わからなくなりますね。

これでBrushの追加は完了です。

<pre class="brush: bash;">// ココにコードを記述</pre>

Makefileの中身を綺麗に表示させようと導入したのですが、Makefileには色がつきませんね。

そのうち自分でBrushを作ってみたいですね。

参考にしたサイト

/packer/
お勧めのJavaScript圧縮ツール。

次の関連記事:linuxBean14.04(23)Makefile用のSyntaxHighlighterのBrushファイルを作る