最近ソースコードが紹介されているブログやウエブページで次のようにエディタ画面を再現したような大変見やすい物が多く見受けられます。
いったいどうやったら出来るのかと思ってgoogle先生に尋ねてみました。

<html>
<head>
<tille>SyntaxHighlighter</title>
</head>
<body>
<h1>SyntaxHighlighter</h1>
<p>これはすごい!</p>
</body>
</html>

それは、SyntaxHighlighterというものだとわかって早速ダウンロードさせて頂いてやってみたのですが、うまくいきませんでした。
しかし、それを実現できるプラグインがmakoto_kwさんのところにありました。
1. 本プラグインをダウンロードしてmtディレクトリに配置します
Movable Type 4にjavascriptでソースコードのハイライト表示を行うSyntaxHighlighter 2.0を導入できるプラグインです。
昨晩はエディタぽい画面は表示出来るのに、表示されるソースコードが細切れに改行させるトラブルから抜け出せなくて、どうしてもうまくいかずに徹夜で悩んでいたのに一挙に解決すっきりしました。
ここです。
SyntaxHighlighter for Movable Type
詳しく書かれているので問題はないと思いますが、以下は自分のメモとして残しておきます。
1.makoto_kwさんのところのSyntaxHighlighter for Movable Type
からプラグインをダウンロードする。
2.解凍して、mt配下にダウンロードして解凍してものと同じ位置(/mt/plugins/と/mt/mt-static/plugins)にそれぞれのSyntaxHighlighterを配置する。
3. 「HTMLヘッダー」テンプレートなどでMTSyntaxHighlighterIncludeタグを追加する。

<$mt:SyntaxHighlighterInclude brush="csharp,cpp,jscript,xml,java, perl,sql" theme="default"$>
<$mt:CCLicenseRDF$>

属性はbrushとthemeがる。

attribute SyntaxHighlighter 2.0
brush as3, csharp, cpp, css, delphi, diff, groovy, jscript, perl, java, php, plain, powershell , python, ruby, scala, sql, vb, xmlから必要なものをカンマ(,)区切りで指定
theme default, django, emacs,fadetogrey,midnight, rdarkのどれか一つを指定。省略した場合は’default’を使用

4.ブログを書く。
フォーマット欄に”SyntaxHighlighter”か”SyntaxHighlighter + Convert Line Breaks”という項目が追加されるのでそれを選択する。
5.そして、ソースコードを記述する部分を下記の形式で記述する。

source code

languageは中身のソースに合わせて指定する。
たとえば

詳しくはこちら。
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes:Delphi
makoto_kwさん、そしてAlexさんほんとうにありがとうございます。


コメント & トラックバック

No comments yet.

コメントする

KUMAOの押入TOP

  • 累積 639430
  • 本日 51
  • 昨日 48
  • 累積PV 2094531
  • 本日のPV 66
  • 昨日のPV 71
  • 現在の閲覧 1

カレンダー

2010年2月
« 1月   3月 »
1234567
891011121314
15161718192021
22232425262728

カテゴリー

最近のコメント

アーカイブ

年間アーカイブ

Twitter

Get Adobe Flash player