シンタックスハイライターでコードをわかりやすくする「jQuery Syntax Highlighter」
コードを表示させたい時、テキストの一部を分類ごとに異なる色やフォントで表示するとわかりやすくなります。
これをシンタックスハイライトと呼んだりしますがSnippet :: jQuery Syntax HighlighterはjQueryでそれを簡単に実現します。
また選べるスタイルも多いので、重宝するかも知れません。
使用方法
Snippet :: jQuery Syntax Highlighterからjquery.snippet.js、jquery.snippet.cssをダウンロードします。
また、jQueryからjquery.jsをダウンロードしてください。
次に下記のようにそれらを読み込みます。
<link rel="stylesheet" type="text/css" href="jquery.snippet.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.snippet.js"></script>
<script>
$(function(){
$("pre").snippet(
"css", //言語を選択
showNum：false , //番号を表示するかどうか
{style:"greenlcd"}); //スタイルを選択
});
</script><pre class="html"><code>
ここにコード書いていきましょー
</code></pre>対応言語 | |
|---|---|
Language |
Language Code |
| C | c |
| C++ | cpp |
| C# | csharp |
| CSS | css |
| Flex | flex |
| HTML | html |
| Java | java |
| JavaScript | javascript |
| JavaScript with DOM | javascript_dom |
| Perl | perl |
| PHP | php |
| Python | python |
| Ruby | ruby |
| SQL | sql |
| XML | xml |
スタイル | |
|---|---|
Default |
Available Values |
| "random" | "acid" "berries-dark" "berries-light" "bipolar" "blacknblue" "bright" "contrast" "darkblue" "darkness" "desert" "dull" "easter" "emacs" "golden" "greenlcd" "ide-anjuta" "ide-codewarrior" "ide-devcpp" "ide-eclipse" "ide-kdev" "ide-msvcpp" "kwrite" "matlab" "navy" "nedit" "neon" "night" "pablo" "peachpuff" "print" "rand01" "random" "the" "typical" "vampire" "vim" "vim-dark" "whatis" "whitengrey" "zellner" |
コメントする
記事作成：2010年11月 9日 10:31
