C、java、JavaScript、html等の言語をハイライト表示するJavaScriptライブラリ「google-code-prettify」
2007年03月26日-
スポンサード リンク
google-code-prettify - Google Code
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>
単純に色分けだけをしたい場合になかなか使えそうですね。
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 個性的な明朝フリーフォント「築豊初号明朝OFL」
- CSSで太陽が差し込むようなアニメーション実装
- 可愛くアニメーションする「beautifully crafted animated icons」
- アイソメトリックなアイコンがアイコンがPNG,SVGでゲットできる「Isoicons」
- ユニークなカタカナフォントtorisippo
- 美しいメッシュグラデーションをCSSで簡単に取得できる「MSHR」
- TailwindCSSなサイトで使える100以上のアニメーションエフェクト「animata」
- SVG形式のテック系企業のロゴを簡単にゲットできる「Svgl」
- 統一感のある色味を一括生成できるツール「The good colors」
- くちばしフォント【商用可】
- 過去のエントリ