シンタックスハイライターでコードをわかりやすくする「jQuery Syntax Highlighter」

コードを表示させたい時、テキストの一部を分類ごとに異なる色やフォントで表示するとわかりやすくなります。
これをシンタックスハイライトと呼んだりしますがSnippet :: jQuery Syntax HighlighterはjQueryでそれを簡単に実現します。
また選べるスタイルも多いので、重宝するかも知れません。
シンタックスハイライターでコードをわかりやすくする「jQuery Syntax Highlighter」サンプル

使用方法
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
Cc
C++cpp
C#csharp
CSScss
Flexflex
HTMLhtml
Javajava
JavaScriptjavascript
JavaScript with DOMjavascript_dom
Perlperl
PHPphp
Pythonpython
Rubyruby
SQLsql
XMLxml

スタイル

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"

sponsors

「シンタックスハイライターでコードをわかりやすくする「jQuery Syntax Highlighter」」をシェアする

記事作成:
記事URL:

TOP > > > シンタックスハイライターでコードをわかりやすくする「jQuery Syntax Highlighter」