Sunday, January 20, 2013

SyntaxHighlighter

Bloggerのソースコード表示にSyntaxHighlighterを使用しようと思ったら、動的ビューだと正常に動作しないらしい
対処法があったので以下の方法で試してみる

  1. まず、
    http://www.way2blogging.org/widget-generators/syntax-highlighter-scripts-generator
    でガジェット用のHTMLを生成する(ソースコードのテーマカラーと、対応させる言語を選択する)
  2. 生成したHTMLからCSSの記述を削除して、
    [レイアウト]→[ガジェットを追加]→[HTML/JavaScript]
    にコピペして追加
  3. 2で削除したCSS(おそらく2つ)をブラウザで直接開き、中身をコピー
  4. コピーしたCSSをちょっと修正(任意)
    /* 縦スクロールバーを消す */
    .syntaxhighlighter {
      width: 100% !important;
      margin: 1em 0 1em 0 !important;
      position: relative !important;
      overflow: auto !important;
      font-size: 1em !important;
      overflow-y: hidden !important; /* 追加 */
    }
    
  5. コピーしたCSSをさらに修正(任意)
    /* ツールバー(右上の?)を消す */
    .syntaxhighlighter .toolbar {
      position: absolute !important;
      right: 1px !important;
      top: 1px !important;
      width: 11px !important;
      height: 11px !important;
      font-size: 10px !important;
      z-index: 10 !important;
      display: none !important; /* 追加 */
    }
    
    (↓の方法でツールバーが消えなかったため)
    <script language="javascript" type="text/javascript">
     SyntaxHighlighter.config.bloggerMode = true;
     SyntaxHighlighter.defaults['toolbar'] = false; // ここ
     SyntaxHighlighter.all();
    </script>
    
  6. コピーしたCSSを
    [テンプレート]→[カスタマイズ]→[アドバンス]→[CSSの追加]
    にペーストして適用
  7. 記事投稿時にソースを<pre>で括り、最後に下記のJavaScriptを記述する(記事毎に必要でちょっとめんどくさい)
    <pre class="brush: js;">
    // HTMLエンコードする
    console.log('疲れた');
    </pre>
    <script src="http://syntaxhighlight-blogger-dynamic.googlecode.com/files/syntaxhighlighter-20111212.js" type="text/javascript"></script>
    
    class="brush: [alias];"の[alias]部分はソースの言語を指定する
    エイリアスは↓
    http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/


結果↓みたいになります
// HTMLエンコードする
console.log('疲れた');

参考

No comments:

Post a Comment