分かりやすくハイライトしてくれる
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;">
alert('Hello World!!');
</pre>
このように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
ぜひお試しあれ♪
