C、java、JavaScript、html等の言語をハイライト表示するJavaScriptライブラリ「google-code-prettify」
2007年03月26日-
A Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page.
C、java、JavaScript、html等の言語をハイライト表示するJavaScriptライブラリ「google-code-prettify」。
具体的な対応言語は、Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles, Ruby, PHP, Awk, Perl のようです。
Cのコードの場合、次のようにハイライトすることができます。色はCSSによって変えられます。
実装は、まずJavaScriptとCSSファイルを読み込み
<script src="prettify.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="prettify.css" />
そして window.onload イベントや、<body onload="〜">なんかでページが読まれた際に「prettyPrint();」関数を呼び出す設定を行います。
window.onload = function() {
prettyPrint();
}
ハイライトしたいコード部分は、「<pre class="prettyprint"> </pre>」タグで囲います。
次はPHPコードの例( PHPの開始タグはエスケープしてます )
<h1>PHP</h1>
<pre class="prettyprint" id="php">
<?php
for ($i=0;$i<100;$i++) {
echo "HOGEHOGE";
}
?>
</pre>
単純に色分けだけをしたい場合になかなか使えそうですね。
関連エントリ
By.KJ : 2007年03月26日 12:05 
間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)
最新のブログ記事(新着順)
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャＭ」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された５００種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 好きな画像や文字を埋め込んだQRコードをリアルタイムで作れるWEBツール
- 過去のエントリ
