THE HAM MEDIA BLOG

Validに対応させたコードを綺麗に見せる『SyntaxHighlighter』導入

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
SyntaxHighlighter
Pre
ソースコード
javascript
SyntaxHighlighter

JavaScriptやCSSの例を載せるときに、
普通に見せていただけでは色分けなどされていないし、
行番が伝えにくかったりして、何かと不便だった。

そこで、ソースコードを綺麗にしてくれるJavaScriptがあったので、
導入してみることにした!

SyntaxHighlighterって?


このJavaScriptは、ソースコードを見やすくするためのもの。
同様にソースコードを綺麗に見せるものはたくさんあるが、
対応している種類の多さと、
何よりも、今勉強中のJavaScriptということだけあって、
導入してみようと思った!

対応している言語の量も多く、以下の言語のソースコードを
綺麗に色分けしてみてくれるようだ。

  • C,C++,C#
  • CSS
  • Delphi
  • Java
  • JavaScript
  • PHP
  • Python
  • Ruby
  • SQL
  • VB
  • XML/HTML


ちなみに、有名なブログの『CSS HappyLife』でも
このSyntaxHighlighterが使われているようだ。

SyntaxHighlighterはここでダウンロードすることができる
syntaxhighlighter - Google Code

ちなみに、こんな風に色分けしてくれる
(JavaScriptがoffになっていると見れません。)
<div id="SampleId01" class="SampleClass01">
  divのサンプル
</div>

配色のCSSも今回は自分でカスタマイズしてみました。


SyntaxHighlighterの使い方。


通常の使い方は、以下のように設定する。

CSS(head内)
<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>


JavaScript(ページの一番下に記述)
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>


HTML その1
<textarea name="code" class="xhtml">
・・・内容
</textarea>


HTML その2
<pre name="code" class="xhtml">
・・・内容
</textarea>


注意すべき点としては、JavaScriptの挿入位置は、
必ずページの一番下である必要がある。
このJavaScriptは、読み込まれた時点で該当部分を検索するので
綺麗に表示させたい部分よりも前においてしまうと、
該当部分を見つけることができないのである。

HTMLでは、preとtextareaのみ対応している。
どちらも name="code"を記入して、classで言語を選択する。


デフォルトの使い方はValidではない


個人的なマークアップのこだわりなのだが、
ソースコードはどちらかというとpreでマークアップしたい。
一番なのは、<pre><code>でマークアップするのだと僕は思っている。

ところがこのSyntaxHighlighterではpreの内側にcodeをいれると
それすらも色分けされて表示されてしまう。
なのでcodeは入れるのをあきらめた。

しかし、preの中でnameを入れるのはもっと好ましくない。
preタグではname要素を使うことが本来できないからだ。
これをするとvalidateでエラーが返ってくる。

なんとかならないものかと思ったので、
本体のソースを少し変更して、name="code"ではなく
title="code"で対応させるようにしてみた。

だからここでは
<pre title="code" class="xhtml">
・・・内容
</textarea>

というような記述にして、Validに対応させてみた。

title要素をつかうのはこれまたどうかと思うかもしれないが、
とりあえずValid対応させたので、個人的に満足。

さらに、JavaScriptを読み込む位置が一番最後だったのを
head内に持ってきたかったのもあるので、
onLoadというものをつかって、HTMLがすべて読み込みおわってか
動作させるように設定を変更してみた。


今後、ソースコードをみせるときは、
コレをつかって表示させていこうと思います。

ただ、seesaaでこれを使うときは、
利用記事で、改行を自動的に<br />に
変換させる機能を止める必要がある。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/91141388

この記事へのトラックバック

seesaaブログでPHPとかのソーススクリプトを表示する方法
Excerpt: こんな感じに出来ます。 手順が結構ややこしいです。。こちらを参考にさせてもらいました!(`・ω・´)Validに対応させたコードを綺麗に見せる導入 | THE HAM MEDIA BLOGhttp:..
Weblog: ないなら作ればいいじゃんw:広く浅いヒホBlog
Tracked: 2011-01-09 00:26

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。