2013/06/09

SyntaxHighlighter 3.0.83 を使ってみる(後編)

今井 です
SyntaxHighlighter 3.0.83 を使ってみる(前編) の続きです。


前回はグダグダな感じで終わってしまった SyntaxHighlighter 3.0.83 の導入ですが、結局「動的ビュー」の制限でうまくいっていないという結論に至りました。
対策としては、いつ仕様が変わるかわからない「動的ビュー」の制限を回避する道を探るより、制限のない普通のテンプレートを選ぶことにしました。


前回は、上手く行かなかったのでテンプレートのHTMLをカスタマイズするという一番確実に実現できそうな方法を選びましたが、普通のテンプレートにしたためガジェットで出来そうな気がします。
ガジェットで対応しておけばテンプレートを変えるたびに設定し直すこともないからこちらがオススメです。

で、とりあえず ホスティング版 を使って SyntaxHightlighter を使うよう、
レイアウト→ガジェットを追加→HTML/JavaScript
に次のようなコードを書いてフッターに配置してみました

<!-- SyntaxHighlighter -->
<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 src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script>

<script type="text/javascript"><!--
  function loadCss(aUrl) {
    var head  = document.getElementsByTagName('head')[0]
    var fileref =document.createElement('link')
    fileref.setAttribute('rel', 'stylesheet')
    fileref.setAttribute('type', 'text/css')
    fileref.setAttribute('href', aUrl)
    fileref.setAttribute('media', 'all')
    head.appendChild(fileref)
  }

loadCss('http://alexgorbatchev.com/pub/sh/current/styles/shCore.css');
loadCss('http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css');

SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.autoloader(
     'as3 actionscript3         http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js'
    ,'bash shell                http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js'
    ,'cf coldfusion             http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js'
    ,'c# c-sharp csharp         http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js'
    ,'cpp c                     http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js'
    ,'css                       http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js'
    ,'delphi pas pascal         http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js'
    ,'diff patch                http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js'
    ,'erl erlang                http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js'
    ,'groovy                    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js'
    ,'js jscript javascript     http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js'
    ,'java                      http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js'
    ,'jfx javafx                http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js'
    ,'perl pl                   http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js'
    ,'php                       http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js'
    ,'plain text                http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js'
    ,'ps powershell             http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js'
    ,'py python                 http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js'
    ,'rails ror ruby            http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js'
    ,'scala                     http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js'
    ,'sql                       http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js'
    ,'vb vbnet                  http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js'
//    ,'xml xhtml xslt html xhtml http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js'
);
SyntaxHighlighter.all();
--></script>

結果は良好、autoloader が必要な JavaScript だけを読み込んで綺麗に表示してくれます。
うまくいったので、参照ファイルを Google Site 上に置いたファイルに置き換えて本ブログに導入しました。


Blogger 上での使い方は「作成」モードでソースコードを貼り付けてから「HTML」モードで貼りつけたコードを次のタグで囲います。ソースコードは有効なHTMLになるようにエスケープする必要がありますが、「作成」モードで貼り付ければエディタ側でエスケープをしてくれます。(使えるブラシは SyntaxHighlighter Bundled Brushes を参照)

<pre class="brush:html">
ソースコード
</pre>

<script>タグを使った方法は ]]> が含まれるソースコード以外はエスケープなしで貼り付けることが出来るメリットが有るはずだったのですが、「作成」画面には表示されないし、フィードにも表示されないし、Blogger のエディタには script タグの対応が正しくないって怒られて勝手にエスケープされるし、使い勝手が悪い。
]]> が絶対に登場しないと言い切れないですし、こちらの方法は使わないことにしました。


ということで無事、導入出来ましたので今後、サンプルコードを書く時は使って行きたいと思います。

0 件のコメント :

コメントを投稿