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ファイルを作る

PR

0 件のコメント:

コメントを投稿