200000.com » HTML/XHTML http://nijyuman.com Webネタから趣味のことまで、ダウンロードもあるよ Wed, 05 May 2010 08:27:00 +0000 http://wordpress.org/?v=2.8.4 ja hourly 1 htmlやCSSのコードを見栄え良く見せる「SyntaxHighlighter」 http://nijyuman.com/2009/11/19/syntax/ http://nijyuman.com/2009/11/19/syntax/#comments Wed, 18 Nov 2009 17:46:12 +0000 admin http://nijyuman.com/?p=104 なんという更新の無さッ…！まぁいいか。
どうも、ポジティブが大事だと思ってるgozaruです。

よくブログでhtmlやCSS、phpなどのソースコードをかっこよく記載しているありますよね。
こんなやつ。

<img src="jotaro.jpg" alt="空条承太郎" width="100" height="50" />
<p>「裁くのは俺のスタンドだッ！」</p>

色分けされていて、ユーザー側にとって非常に見やすいです。
このような関連プラグインは様々あるみたいですが、その中の一つ「SyntaxHighlighter」を使うととっても簡単に実装することができます。っていうかできました。っていうかやり方忘れそうなので書いておきます。

実装手順

  1. syntaxhighlighterの「Downloads」からファイルをダウンロードして解凍。(現在のバージョンは1.5.1)
  2. 「Scripts」フォルダ内にあるShCore.js + 表示したい言語のJSファイル(ShBrush◯◯◯.js)をhtmlからリンク。
  3. 「Styles」フォルダ内にあるSyntaxHighlighter.cssをhtmlからリンク。
  4. (もう一つの「Uncompressed」フォルダは特に今回使う必要は無し)
<!-- こんな感じでheadタグ内に記入します -->
<head>
<link rel="stylesheet" href="SyntaxHighlighter.css" type="text/css" media="screen" />

<script src="shCore.js" type="text/javascript"></script>
<script src="shBrushXml.js" type="text/javascript"></script>
</head>

上記で実装は完了！とっても簡単。
実際に使用する時はこんな要領で、pre要素に言語のclassを付けて使います。
なんかうまくいかないと思ったらname=”code”を付けないと駄目みたい。

<pre class="xml" name="code">
<script src="shCore.js" type="text/javascript"></script>
<script src="shBrushXml.js" type="text/javascript"></script>
</pre>
]]> http://nijyuman.com/2009/11/19/syntax/feed/ 0