tmp: SyntaxHighlighter

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

まず、
http://www.way2blogging.org/widget-generators/syntax-highlighter-scripts-generator
でガジェット用のHTMLを生成する（ソースコードのテーマカラーと、対応させる言語を選択する）
生成したHTMLからCSSの記述を削除して、
[レイアウト]→[ガジェットを追加]→[HTML/JavaScript]
にコピペして追加
2で削除したCSS（おそらく2つ）をブラウザで直接開き、中身をコピー

コピーした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; /* 追加 */
}

コピーした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>

コピーしたCSSを
[テンプレート]→[カスタマイズ]→[アドバンス]→[CSSの追加]
にペーストして適用
記事投稿時にソースを<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('疲れた');

参考

tmp

Sunday, January 20, 2013

SyntaxHighlighter

No comments:

Post a Comment