SyntaxHighlighter とは

コードをカラー表示します。他の例に倣って "Hello World !" を HTML と JavaScript で表示して見ましょう。

<pre class="brush: html"; title="HTMLの例">
<p>Hello World !</p>
</pre>

<pre class="brush: js";title="JavaScriptの例">
function helloSyntaxHighlighter()
{
	return "hi!";
}
</pre>

SyntaxHighlighter の使用例

オートローダの使用例です。
オートローダをはじめ、必要なファイルは</body> の下で纏めてインクルードしています。

● html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>SyntaxHighlighter Autoloader Example</title>
</head>

<body>

<h1>SyntaxHighlighter  Autoloader Example</h1>
<pre class="brush: js; html-script: true;">
<!-- ここからソースを記述します -->
･･･
<!------ ここまで ------>
</pre>
</body>
<!-- begin:SyntaxHighlighter -->
<link href='/files/sh3/styles/shCore.css' rel='stylesheet' type='text/css' />
<link href='/files/sh3/styles/shThemeDefault.css' rel='stylesheet' type='text/css' />
<script src='/files/sh3/scripts/shCore.js' type='text/javascript'></script>
<script src='/files/sh3/scripts/shAutoloader.js' type='text/javascript'></script>
<script src='/files/sh3/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='/files/sh3/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='/files/sh3/scripts/shBrushCss.js' type='text/javascript'></script>
<!-- SyntaxHighlighter autoloader --> 
<script type="text/javascript" src="/files/sh3/sh3.js"></script>
<!-- end:SyntaxHighlighter -->
</html>

●オートローダ：sh3.js

function path()
{
  var args = arguments,
      result = []
      ;
       
  for(var i = 0; i < args.length; i++)
      result.push(args[i].replace('@', '/files/sh3/scripts/'));
       
  return result
};
 
SyntaxHighlighter.autoloader.apply(null, path(
  'applescript            @shBrushAppleScript.js',
  'actionscript3 as3      @shBrushAS3.js',
  'bash shell             @shBrushBash.js',
  'coldfusion cf          @shBrushColdFusion.js',
  'cpp c                  @shBrushCpp.js',
  'c# c-sharp csharp      @shBrushCSharp.js',
  'css                    @shBrushCss.js',
  'delphi pascal          @shBrushDelphi.js',
  'diff patch pas         @shBrushDiff.js',
  'erl erlang             @shBrushErlang.js',
  'groovy                 @shBrushGroovy.js',
  'java                   @shBrushJava.js',
  'jfx javafx             @shBrushJavaFX.js',
  'js jscript javascript  @shBrushJScript.js',
  'perl pl                @shBrushPerl.js',
  'php                    @shBrushPhp.js',
  'text plain             @shBrushPlain.js',
  'py python              @shBrushPython.js',
  'ruby rails ror rb      @shBrushRuby.js',
  'sass scss              @shBrushSass.js',
  'scala                  @shBrushScala.js',
  'sql                    @shBrushSql.js',
  'vb vbnet               @shBrushVb.js',
  'xml xhtml xslt html    @shBrushXml.js'
));
SyntaxHighlighter.all();

SyntaxHighlighter テーマ集

文字や背景色を変更できます。次のリンクから内容を見てください。