前の関連記事：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と確認しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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> |
ちゃんと//shBrushBash.jsのようにコメントを入れておかないとあとで全然わからなくなりますね。
これでBrushの追加は完了です。
1 |
<pre class="brush: bash;">// ココにコードを記述</pre> |
そのうち自分でBrushを作ってみたいですね。
参考にしたサイト
/packer/
お勧めのJavaScript圧縮ツール。
0 件のコメント:
コメントを投稿