MT記事内のソースコードを美しく!:SyntaxHighlighter for Movable Type

2012年7月15日 13:21 

  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • Yahoo!ブックマークに登録

技術系のブログを更新していると、記事内でソースコードを表記することもありますよね。

WordPressにも簡単なプラグインがあるので、MTにもきっとあるはず!と調べたらありました。良かった 笑

使うプラグインは SyntaxHighlighter for Movable Type です。
2009年が最後のアップデートのようですが、この記事を書いている時点でMT5.1までは動作確認が取れています。

SyntaxHighlighter for Movable Typeの準備

SyntaxHighlighter for Movable Type のダウンロードが完了したら、以下を自分のサイトMTディレクトリにアップロードします。

  • ● mt-static > http://sample.com/mt/ ←ココ!
  • ● plugins >  http://sample.com/mt/plugins/ ←ココ!

アップロードが完了したら、実際に記事内で使用するための準備を行います。
テンプレートの head 部分に以下を書き込みます。
「HTMLヘッダー」などに書き込んでしまっても大丈夫です。

<head>
<$mt:SyntaxHighlighterInclude brush="jscript,html,css,cpp,perl" theme="default"$>​
</head>

属性は、brush と が用意されているので、自分のブログで扱うソースコードの種類を指定指定しておきましょう。

スクリーンショット(2012-07-15 20.56.24).png

使用方法

実際に記事内で使用してみましょう。 専用のフォーマット「SyntaxHighlighter + Convert Line Breaks」を選択します。
※ このプラグインでソースコードを装飾したい場合は、「リッチテキスト」を使用出来ないので注意してください。
スクリーンショット(2012-07-15 20.51.31).png

あとは以下の形式で記載するだけで完了です。
スクリーンショット(2012-07-15 20.58.05).jpg

language の部分には、書き込むソースコードの言語を指定します。
スクリーンショット(2012-07-15 20.57.27).png
以上です。数分の作業で簡単に導入できたので、MTで技術系のブログを運営されている方はぜひ試してみてください。




この記事は以下を参考にしています

SyntaxHighlighter for Movable Type « kwLog

シェアする

  • このエントリーをはてなブックマークに追加
comments powered by Disqus

Twitter

Facebookページ


Clip to Evernote このエントリーをはてなブックマークに追加
Yahoo!ブックマークに登録

月別アーカイブ

  • セーノのtwitter
  • セーノのfacebookページ
  • セーノのmixiページ
  • セーノのwordpressブログ
  • セーノのgoogle plusページ