ソースコードを綺麗に表示でき、記事で記入も楽なスクリプト
種類は色々ありますが・・・
設置が簡単で、使用する時のタグも覚えやすい物を選び設置しました(見た目も( ´艸`)ププッ
Movable Type 5.12Snippet::jQuery Syntax Highlighter v2.0.0を設置したお話。
*現在は使用しておりませんので見本無しです(^_^;)

jQuery syntax highlighting plugin 設置

使用するスクリプト(プラグイン)をダウンロード
Snippet::jQuery Syntax Highlighter v2.0.0より下記の2つをダウンロード
1. jquery.snippet.min.js
2. jquery.snippet.min.css
3.jQueryはGoogleAPIから呼び出しています

スクリクトをサーバーへアップロード
ここの説明では
ブログURL/js/jquery.snippet.min.js
ブログURL/css/jquery.snippet.min.css
となっています

サイトに呼び出しタグ等貼り付ける

ヘッダーに
<link rel="stylesheet" href="<mt:BlogRelativeURL>css/jquery.snippet.min.css" media="screen">
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.7");</script>
<script src="<mt:BlogRelativeURL>js/jquery.snippet.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("pre.htmlCode").snippet("html",{style:"ide-anjuta",showNum:false});
$("pre.styles").snippet("css",{style:"ide-anjuta",showNum:false});
$("pre.js").snippet("javascript",{style:"ide-anjuta",showNum:false});
$("pre.php").snippet("javascript",{style:"ide-anjuta",showNum:false});
});
</script>
CSSはアップロードした場所から呼び出すようにしてください
 *ヘッダー上記タグの下でも可能なのですが何故かうちのブログでは反応してくれませんでした
 フッター</body>タグ前あたりに4行目から設置すると動作しました

jsはアップロードした場所から呼び出すようにしてください
$("ソース囲いタグ.クラス属性").snippet("出力言語",{style:"表示スタイル",行番号:表示有無});

このブログの設定は
ソースの囲いタグ:<pre></pre>
クラス属性:自分でわかりやすいのでOK
出力言語:ソースの強調が変わりますのでなるべくソース内容に合わせて使い分ける
表示スタイル:39種のタグからコードを表示する都度選べます、ランダム設定も有
行番号:true(有) false(無)
クリップボードへのコピーできるようにするには「ZeroClipboard.swf」をダウンロードし
上記タグへ追加する
例:$("pre.php").snippet("javascript",{style:"ide-anjuta",showNum:false, clipboard:"ZeroClipboard.swf"});

ブログ記事で使う

<pre class="クラス属性">
内容~ほにゃらら~
</pre>
使うソースでクラス属性を変えるだけです

これで完了です。

2011/12/21 jQuery, MT5.12
2012/01/08 ,
Comments(0)
関連記事