ホームページ制作:ソースコード(Java Script，HTML，PHPなど)をハイライト表示
ホームページ上で、HTML,Java Script, PHP, Java, Ruby などなど、いろんなプログラム言語のサンプルソースを記載する機会があると思いますが、単純にコードを並べるだけでは折角のサンプルがいかされませんよね。
ソースコードは他人が見ても分かりやすくしておくということは、プログラマーの絶対条件だと思います。
ホームページ用だからと言って手を抜かずに、お洒落で便利にソースコードを公開してみましょう。
最近ではいろんなところから、各ソースコードに対応したハイライト機能が公開されていますが、機能性、デザイン性、利便性が兼ね備わった「syntaxhighlighter」は一押しだと思います。
利用方法も簡単！HTMlの知識だけで十分です。ダウンロードして、ファイルを設置して、textarea / preでコードを記載するだけです。
syntaxhighlighterのダウンロード
code.google.com/p/syntaxhighlighter/
syntaxhighlighterの言語対応表
code.google.com/p/syntaxhighlighter/wiki/Languages
設置方法
|
1 |
<link type="text/css" rel="stylesheet" href="./SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link><script language="javascript" src="./SyntaxHighlighter/Scripts/shCore.js"></script><script language="javascript" src="./SyntaxHighlighter/Scripts/shBrushXml.js"></script><script language="javascript" src="./SyntaxHighlighter/Scripts/shBrushCss.js"></script><script language="javascript" src="./SyntaxHighlighter/Scripts/shBrushJScript.js"></script><script language="javascript" src="./SyntaxHighlighter/Scripts/shBrushPhp.js"></script><script language="javascript">window.onload = function() { dp.SyntaxHighlighter.HighlightAll('code');}</script> |
利用方法
|
1 |
<textarea name="code" class="xhtml"> <font>ほげほげ</font></textarea><pre name="code" class="xhtml"> <font>ほげほげ</font></pre> |