Movable Type 備忘録
dp.SyntaxHighlighter
- Next Page: Firefox2.0をスピードアップする13の方法
- Prev Page: whos.amung.us
こんにちわ^^
去年末くらいから目がショボショボして疲れ気味の bzbell です(つω-`。)
肩こりもひどくて、あまりにも目が痛かったので眼科いったらドライアイだと言われました Σ( ̄Д ̄;)!!
ドライアイの人って割りと多いみたいで、モニターの見過ぎで症状がでたりするそうです。
なので、お仕事はどうしてもパソコン使わないと話にならないので諦めて、家ではなるべく使わないようにしてますの。
おかげさまで多少は楽になったような気がする今日この頃です。
そんな話はさらぁ~と流して、今回は前々から使おうと思ってダウンロードしたけど、それっきり忘れていた、dp.SyntaxHighlighterを使ってみたのでご紹介です。
dp.SyntaxHighlighterって何かというと、たとえば、わたしのサイトではよくCSSのサンプルを載せたり、XHTMLやJavaScriptのコードを載せたりしてます。
普通に<textarea>タグで表示するのでは味気ないですが、dp.SyntaxHighlighterというJavaScriptを使えば以下のようなかんじで、行番号付きで整形してくれるというしろものです。
上記はJavaScript用の表示ですが、以下はCSS用の表示になります。
これら以外にもたくさんの言語をサポートしてるようです。
使い方はカンタンです。
まず、こちらのdp.SyntaxHighlighterから圧縮ファイルをダウンロードして、適当なフォルダに展開します。
- 各自の環境に合わせてサーバ上に、dp.SyntaxHighlighter/というディレクトリを作成して、その中にScripts/フォルダとStyles/フォルダをアップロードします。
メインページなどのテンプレート中の<head>~</head>の間に、使用したい言語に対応するJavaScriptを、以下のように追加します。
上記はXML、CSS、PHPとJavaScriptのコードを整形したい場合の例です。
shCore.js、webscript.jsは必須です。最後に、サンプルコードを載せるときに以下のようなかんじで記述すれば完了です。
<textarea>タグのname属性に 'code'として、class名に表示するコードの名称を指定します。
対応するコードのクラス名称
- 2007.04.15 追記 -
すいません。webscript.jsのコードを記すの忘れてました (; ̄∇ ̄A
以下のコードを記します。
window.onload = function() {
dp.SyntaxHighlighter.HighlightAll('code', true, false);
}
以上で完了です。
後はお好みで、先ほどアップロードしたSyntaxHighlighter.css中の色などをカスタマイズするだけです。
どうでしょうか。
色分けされるので見やすくなってると思います。
Trackback Pings(3)
- from
cliplog
CSSとJavaScriptを組み込むだけでコードのハイライト表示ができるSyntaxHighLighterを使ってみました.クライアントサイドで処理を...
- from
Web-Memo
前々から気になっていた、ソースコードを公開する際に、エディターっぽく行番号やデ...
- from
Flabo
dp.SyntaxHighlighterをActionScript 2.0 or 3.0 のコードに対応する為のプラグイン公開。 ...
Comments(4)
- #2: Posted by bzbell [RES]
>>1 oscar さん
こんにちわ^^
> 結構他所でも記事を見かけてたんですが、意外と便利なのかな?
そうですねぇ、コードに合った強調表示と行番号が自動化されるので、場合によっては説明し易いかも、です。
> 一か所だけ気になるのは、JavascriptOFFの時の表示です。
実はこれを言われると、わたしのサイトはツライんです(つω-`。)
だって、Ajaxをバンバン使ってますので・・・。チョビット市場調査してみようかな(●´∀`●)
- #3: Posted by oscar [RES]
>Ajaxをバンバン使ってますので・・・。
というか、装飾的な部分や付加情報で使うのは、全然構わないと思うのですよ。
コメントやトラバがJavascriptが必須ってのもありだと思います。ただ、本文の視認性だけは、Javascriptに影響されないようにするべきかなと思っています。
せめて、エントリーを読むのだけは、可能にしておくべきじゃないかなと・・・
- #4: Posted by bzbell [RES]
>>3 oscar さん
> エントリーを読むのだけは、可能にしておくべきじゃないかなと・・・
そうですね。
それって最低限のことですよね ( ̄∇ ̄)bそいう意味だと、このスクリプトでの強調表示や行番号に頼った記事の書き方しなければ、問題ないかな、と思います。
少なくとも<textarea>でコードは読み取れますから♪


こんにちは。
結構他所でも記事を見かけてたんですが、意外と便利なのかな?
これも検討対象かも・・・
一か所だけ気になるのは、JavascriptOFFの時の表示です。
テキストエリアがえらく狭いんですけど、これは何か調整した方が良くないですかね。