Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

dp.SyntaxHighlighter

Apr112007
Vote:
http://bizcaz.com/archives/2007/04/11-220828.php
Categories: JavaScript
Tags: dp.SyntaxHighlighter, JavaScript
Social Bookmark

Prev Page: Form field hints with CSS and JavaScript
Next Page: Wrap Scroll / ブラウザースクロールと連動するサイドバー

こんにちわ^^

去年末くらいから目がショボショボして疲れ気味の bzbell です（つω-`｡）

肩こりもひどくて、あまりにも目が痛かったので眼科いったらドライアイだと言われました Σ(￣Д￣；)!!
ドライアイの人って割りと多いみたいで、モニターの見過ぎで症状がでたりするそうです。

なので、お仕事はどうしてもパソコン使わないと話にならないので諦めて、家ではなるべく使わないようにしてますの。
おかげさまで多少は楽になったような気がする今日この頃です。

そんな話はさらぁ~と流して、今回は前々から使おうと思ってダウンロードしたけど、それっきり忘れていた、dp.SyntaxHighlighterを使ってみたのでご紹介です。

dp.SyntaxHighlighterって何かというと、たとえば、わたしのサイトではよくCSSのサンプルを載せたり、XHTMLやJavaScriptのコードを載せたりしてます。

普通に<textarea>タグで表示するのでは味気ないですが、dp.SyntaxHighlighterというJavaScriptを使えば以下のようなかんじで、行番号付きで整形してくれるというしろものです。

dp.sh.Brushes.JScript = function()
{
var keywords =  'abstract boolean break byte case catch char class const continue debugger ' +
'default delete do double else enum export extends false final finally float ' +
'for function goto if implements import in instanceof int interface long native ' +
'new null package private protected public return short static super switch ' +
'synchronized this throw throws transient true try typeof var void volatile while with';
this.regexList = [
{ regex: dp.sh.RegexLib.SingleLineCComments,                css: 'comment' },           // one line comments
{ regex: dp.sh.RegexLib.MultiLineCComments,                 css: 'comment' },           // multiline comments
{ regex: dp.sh.RegexLib.DoubleQuotedString,                 css: 'string' },            // double quoted strings
{ regex: dp.sh.RegexLib.SingleQuotedString,                 css: 'string' },            // single quoted strings
{ regex: new RegExp('^\\s*#.*', 'gm'),                      css: 'preprocessor' },      // preprocessor tags like #region and #endregion
{ regex: new RegExp(this.GetKeywords(keywords), 'gm'),      css: 'keyword' }            // keywords
];
this.CssClass = 'dp-c';
}
dp.sh.Brushes.JScript.prototype = new dp.sh.Highlighter();
dp.sh.Brushes.JScript.Aliases   = ['js', 'jscript', 'javascript'];

上記はJavaScript用の表示ですが、以下はCSS用の表示になります。

これら以外にもたくさんの言語をサポートしてるようです。

使い方はカンタンです。

まず、こちらのdp.SyntaxHighlighterから圧縮ファイルをダウンロードして、適当なフォルダに展開します。
各自の環境に合わせてサーバ上に、dp.SyntaxHighlighter/というディレクトリを作成して、その中にScripts/フォルダとStyles/フォルダをアップロードします。
メインページなどのテンプレート中の<head>~</head>の間に、使用したい言語に対応するJavaScriptを、以下のように追加します。
<link rel="stylesheet" href="<$MTBlogURL$>dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" /> <script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/shCore.js"></script> <script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script> <script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/shBrushCss.js"></script> <script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/shBrushPhp.js"></script> <script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/shBrushJScript.js"></script> <script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/webscript.js"></script>
上記はXML、CSS、PHPとJavaScriptのコードを整形したい場合の例です。
shCore.js、webscript.jsは必須です。

- 2007.04.15 追記 -

すいません。webscript.jsのコードを記すの忘れてました (;￣∇￣A
以下のコードを記します。

window.onload = function() {
dp.SyntaxHighlighter.HighlightAll('code', true, false);
}

最後に、サンプルコードを載せるときに以下のようなかんじで記述すれば完了です。
<textarea name="code" class="xhtml"> ：：： </textarea>
<textarea>タグのname属性に 'code'として、class名に表示するコードの名称を指定します。
対応するコードのクラス名称