分かりやすくハイライトしてくれる
SyntaxHighlighterを導入しました。
参考させていただいたリンク
・BloggerにおけるSyntaxHighlighterの使い方
・「SyntaxHighlighter」各要素ごとの設定項目
・Blogger に SyntaxHighlighter 2 をインストールする
まずbloggerのHTMLの編集で<head>内にSyntaxHighlighterのコアjsファイルを導入。
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"/>
次にハイライトしたい言語を選択し挿入。
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreDjango.css' rel='stylesheet' type='text/css'/>
最後にSyntaxHighlighterを有効にする処理を挿入。
<script type="text/javascript">
// Bloggerへの埋め込みなら以下の一行は必須です。
SyntaxHighlighter.config.bloggerMode = true;
// クリップボードSWFもホスティングしてもらいましょう。
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
// 論理改行は無効にしておきます。
SyntaxHighlighter.defaults['wrap-lines'] = false;
// 最後にSyntaxHighlighterを有効にします。
SyntaxHighlighter.all();
</script>
これでソースコードをハイライトする準備が終了。
使い方は
<pre class="brush: javascript;">このようにpreタグで囲み、
alert('Hello World!!');
</pre>
class属性で使用したいbrushを選択するだけ。
html-script
htmlやxmlもハイライトしてくれる。
<pre class="brush: javascript;html-script: true">
SampleCode
</pre>
gutter: false;
行番号の表示、非表示
<pre class="brush: javascript;gutter: false;">
サンプルコード
</pre>
ページ上のハイライトされた要素をデフォルト隠す。
クリックすると開く。↓
<pre class="brush: javascript;collapse: true'">
123456789
</pre>
最後にCSSのテーマ
Defaultだとこれ
最終的にblogのテーマに合わせると
Djangoが一番あってました。
他は
- Eclipse
- Emacs
- FadeToGray
- Midnight
- RDark
ぜひお試しあれ♪
