最近ソースコードが紹介されているブログやウエブページで次のようにエディタ画面を再現したような大変見やすい物が多く見受けられます。
いったいどうやったら出来るのかと思って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
詳しく書かれているので問題はないと思いますが、以下は自分のメモとして残しておきます。
１．makoto_kwさんのところのSyntaxHighlighter for Movable Type
からプラグインをダウンロードする。
２．解凍して、mt配下にダウンロードして解凍してものと同じ位置（/mt/plugins/と/mt/mt-static/plugins）にそれぞれのSyntaxHighlighterを配置する。
３． 「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'を使用
|
４．ブログを書く。
フォーマット欄に"SyntaxHighlighter"か"SyntaxHighlighter + Convert Line Breaks"という項目が追加されるのでそれを選択する。
５．そして、ソースコードを記述する部分を下記の形式で記述する。
[code language]
source code
[/code]
languageは中身のソースに合わせて指定する。
たとえば
[code html] [code php]
詳しくはこちら。
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes:Delphi
makoto_kwさん、そしてAlexさんほんとうにありがとうございます。
最近のコメント