open-clothes.org

MTカスタマイズ コードのシンタックスハイライト

重い腰をあげてやっとブログを書きます。春田です。

"Webプロデュース"は「ファッション×IT」なオープンクローズの「IT」の部分を担う事業部です。 WebプロデュースではブランドのECサイトやコンセプトサイト、生地メーカーのオンラインショールームサイトなど様々なタイプのWebサイトをプロデュースしてきました。
なかでもよく聞く要望に「自分達でWebサイトを更新したい」というものがあり、その場合にはMovableType(ブログを書くために生まれたツールで管理画面から簡単にサイトの更新ができる)というCMSを利用します。これまで多くの案件でMovableTypeを使ってきて、カスタマイズなどのノウハウも蓄積されてきました。

このサイトもMovableTypeで作られていますが、今日はこのブログにHTMLやプログラムなどのコードを読みやすく表示するためのちょっとしたカスタマイズを紹介しようと思います。(業務連絡も兼ねて。。)

下記の2点を満たすものを探したところSyntaxHighlighterというものがありましたので、これを使います。

• ・コードをそのまま張り付けられる
• ・コードを読みやすく色付けして表示できる

テンプレートの仕込み

まずは必要なCSSファイル、JSファイルを読み込みます。モジュールテンプレートの「ヘッダー」に下記3行を追加します。

SyntaxHighlighter.all()を実行する必要があるようなのでモジュールテンプレートの「フッター」に下記3行を追加します。

テンプレートの編集は以上です。とても簡単です。

ブログ記事の書き方

記事を書く場合は貼り付ける言語に合わせてJSファイルを読み込む必要があります。 こちらの一覧をみながら下の「XXXXX」を適当に置き換えたものを本文に貼り付けます。

あとはコード書いて<pre class="brush: xxx;">～</pre>で囲えばOKです。(「xxx」は上掲一覧のBrush aliasesの項を参照)

表示例

HTML, CSS, JavaScriptについて例を示します。

HTML

本文:

ひらけ服

表示:

ひらけ服

CSS

本文:

body {
  color:#ccc;
}

表示:

body {
  color:#ccc;
}

JavaScript

本文:

function hoge() {
  alert('ひらけ服!');
}

表示:

function hoge() {
  alert('ひらけ服!');
}

シンタックスハイライトに加え、背景もしましまに色付けされています。コピーも簡単にできるようになってて便利ですね。

突然の別世界で驚かれた方も居られると思いますが、、
今後、こちらのブログでWeb開発におけるTIPSやおもしろいデザインのサイトなどの紹介などもやっていけたらと思います。よろしくお願いいたします。