Movable Typeに「syntaxhighlighter」を導入

　Movable Typeに書いたソースコードをきれいに見せたいと思い、syntaxhighlighterを導入してみまいした。

　まずはあなたのソースコードを彩る、Syntax Highlighterまとめを読んで何を使うか検討。
　Yahooやコリス様などでも使われていて、デザインもきれいということで syntaxhighlighterに決めました。

　これを導入することにより

<script type="text/javascript" src="http://mocamoca.biz/blog/dayChecker.js"></script>
<script type="text/javascript" src="http://mocamoca.biz/blog/highslide/highslide.js"></script>
</head>
<body class="layout-two-column-right" onload="mtEntryOnLoad()">
<div id="box" class="clearfix">
<a name="pagetop" id="pagetop"></a>
<div id="header">
<h1 id="blog-name"><a href="http://mocamoca.biz/blog/" accesskey="1">モカモカ工房</a></h1>
<p class="blog-description">Web関連情報（CSS、SEO、ネットワーク等々）</p>
</div>

　といった具合にコマンドを色分けし、行番号をつけてソースコードを表示することが出来ます。
　plain textで表示させたり、印刷したりすることも出来ます(^-^)v

まずGoogle codeよりスクリプトをダウンロードします。
解凍して出てきたファイルのうち「dp.SyntaxHighlighterｴStylesｴSyntaxHighlighter.css」の内容をスタイルシートテンプレートに転載します。
ブログディレクトリに「syntaxhighlighter」というディレクトリを作り、そこにjavascriptをアップロードします。
　私はxhtml、CSS、Javascriptを掲載したいので

shCore.js
shBrushXml.js
shBrushCss.js
shBrushJScript.js

　をアップロードしました。
　さらに

clipboard.swf

　も同じディレクトリにアップロード。

ブログの入力の際に、公開するコードを例えばxhtmlの場合

<pre name="code" class="xml"> </pre>

　で囲みます。

さらに「フッターテンプレート」にjavascriptのリンクコードを挿入します。

   <script type="text/javascript" src="<$MTBlogURL$>syntaxhighlighter/shCore.js"></script>  
   <script type="text/javascript" src="<$MTBlogURL$>syntaxhighlighter/shBrushJScript.js"></script>  
   <script type="text/javascript" src="<$MTBlogURL$>syntaxhighlighter/shBrushCss.js"></script>  
   <script type="text/javascript" src="<$MTBlogURL$>syntaxhighlighter/shBrushXml.js"></script>
   <script class="javascript" type="text/javascript">  
      dp.SyntaxHighlighter.HighlightAll('code');  
      dp.SyntaxHighlighter.ClipboardSwf = '<$MTBlogURL$>syntaxhighlighter/clipboard.swf';
   </script>