2012年8月10日金曜日

SyntaxHighlighter導入ではまった件

前の記事にSyntaxHighlighterを導入しようとしたんだが
結局うまく動かせるまでに3時間ほどかかった、気がする
原因はDynamic Viewという、Bloggerに適用したデザインテンプレートのせい
こちらのブログを参照させていただき解決した
BloggerのDynamic View(動的ビュー)でSyntaxHighlighterを使う

以下、自分の忘れ防止のためのメモ
1.コードをここでHTMLエンコードする
2.
<pre class="brush:[コードの種類]">
<!-- ここにコードを記述 -->
</pre>
[コードの種類]は
Bashスクリプトのときbash
JavaScriptのときjs
CSSのときcss
Pythonのときpython
Plain Textのときtext
3.HTMLエディタに切り替えて、末尾に以下のコードを貼り付ける
<div style="display:none">
<pre class="brush:bash"></pre>
<pre class="brush:js"></pre>
<pre class="brush:css"></pre>
<pre class="brush:cpp"></pre>
<pre class="brush:pascal"></pre>
<pre class="brush:python"></pre>
<pre class="brush:php"></pre>
<pre class="brush:text"></pre>
<pre class="brush:sql"></pre>
<pre class="brush:perl"></pre>
<pre class="brush:as3"></pre>
<pre class="brush:xml"></pre>
</div>
<script type='text/javascript'>
 function loadScript(url, callback){
  var script = document.createElement('script')
  script.type = 'text/javascript';
  if (script.readyState){  //IE
   script.onreadystatechange = function(){
    if (script.readyState == 'loaded' ||
      script.readyState == 'complete'){
     script.onreadystatechange = null;
     callback();
    }
   };
  } else {  //Others
   script.onload = function(){
    callback();
   };
  }
  script.src = url;
  document.getElementsByTagName('head')[0].appendChild(script);
 }
 loadScript('http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js', 
  function(){
   loadScript('http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js', 
    function(){
     SyntaxHighlighter.config.bloggerMode = true;
     SyntaxHighlighter.autoloader(
       'bash  http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js',
       'js jscript javascript http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js',
       'css http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js',
       'cpp c http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js',
       'delphi pascal http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js',
       'py python http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js',
       'php http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js',
       'text plain http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js',
       'sql http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js',
       'perl pl http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js',
       'actionscript3 as3 http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js',
       'xml xhtml xslt html http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js'      
     );
     SyntaxHighlighter.all();
    }  
   );
  }
 );
</script>

0 件のコメント:

コメントを投稿