Lokka SyntaxHighlighter 試した

自前のコードだと効率が悪い(^^;)ので、SyntaxHighlighterをlayout.hamlに組み込む方針でとりあえず試してみた。

%script{:src => "#{@theme.path}/shjs/shCore.js" ,:type=>"text/javascript"}
    %link{:rel => 'stylesheet', :href => "#{@theme.path}/shcss/shCore.css",:type=>'text/css'}
    %link{:rel => 'stylesheet', :href => "#{@theme.path}/shcss/shThemeMidnight.css",:type=>'text/css'}
    %script{:src => "#{@theme.path}/shjs/shBrushRuby.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shAS3.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushApplescript.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushbash.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushCSharp.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushCpp.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushCss.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushDelphi.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushDiff.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushErlang.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushGroovy.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushJScript.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushJava.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushJavaFX.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushPhp.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushPlain.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushPowerShell.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushPython.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushSass.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushScala.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushSql.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushVb.js" ,:type=>"text/javascript"}
    %script{:src => "#{@theme.path}/shjs/shBrushXml.js" ,:type=>"text/javascript"}

    
    :javascript
      SyntaxHighlighter.defaults['toolbar']=true;
      SyntaxHighlighter.config.strings.viewSource ="copy to clipboard";
      SyntaxHighlighter.all();

こんなコードをlayoutに埋め込んでみる。
そうすると、

こんなふうに表示することができる。でもこれだとtheme内でしか表示できないので、plugin化したほうがいいような気がする。

作者さんの最近のblogに、theme側でheaderを持っていれば色々挿入できる、と書いてあるので、content_for :header doでjavascript埋め込んでやればplugin化ができるのかな。

明日以降のチャレンジということで。