htmlやCSSのコードを見栄え良く見せる「SyntaxHighlighter」

HTML/XHTML

2009.11.19(木)

なんという更新の無さッ…！まぁいいか。
どうも、ポジティブが大事だと思ってる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>

< Material はじめました。 | Index | あめましておめでとうございます >

Comment

コメントを投稿する





PAGE TOP