ホーム > カテゴリ > HTML5・JavaScript >

SyntaxHighlighterの使い方

ソースコードをハイライト表示するSyntaxHighlighter(JavaScriptライブラリ)の使い方です。同様なJSライブラリではGoogle-Code-Prettifyもありますが、このSyntaxHighlighterはやや上級者向けです。初心者の方や転送量を抑えたい方はGoogle-Code-Prettifyをお薦めします。

1.ダウンロード

まずはライブラリをダウンロードします。
http://alexgorbatchev.com/SyntaxHighlighter/

2.環境設定

自分のWEB、ブログなどの環境へダウンロードした「syntaxhighlighter_xxx」をアップロードします。xxxはバージョン番号です。(例)syntaxhighlighter_3.0.83

3.HTMLからライブラリを読み込む

ここでは8行目～11行目が読み込み処理となります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" href="./css/common.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="./syntaxhighlighter_3.0.83/styles/shCoreDefault.css" />
<script type="text/javascript" src="./syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
<script type="text/javascript" src="./syntaxhighlighter_3.0.83/scripts/shBrushXml.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>
</head>
<body>
</body>
</html>

08行目 shCoreDefault.css
　必須(CSS)

09行目 shCore.js
　必須(JS)

10行目 shBrushXml.js
　任意(ここに使用したい言語のFile nameを記述する)

11行目 SyntaxHighlighter.all();
　必須(ライブラリの実行)

4.ソースコードをハイライトする

ハイライトするにはpreタグでソースコードを括りclass名を指定します。brush:xml;はXML文書(xml, xhtml, xslt, html, xhtml)としてハイライト表示するという意味です。

<pre class="brush:xml;">
<html>
  <body>
　...
  </body>
</html>
</pre>

他の言語をハイライトする

上記のサンプルではXML文書をハイライト表示するものです。
他の言語をハイライト表示するには任意の言語のJSファイル(File name)を指定する必要があります。その次にpreタグのクラス名(Brush aliases)を指定すればOKです。

Brush nameBrush aliasesFile name
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js

※上記以外の言語にも対応していますので詳しくは公式ページをご覧下さい。

行数を指定して強調表示

「highlight:[2,3,5]」を挿入すると2,3,5行目が強調表示されます。

<pre  class="brush:xml;highlight:[2,3,5];">
</pre>

注意事項

このブログではソースコードのハイライトは「Google-Code-Prettify」を使用しています。Google-Code-Prettifyの使用方法はこちらからどうぞ :-)





関連記事


前の記事：Google-Code-Prettifyの使い方
次の記事：highlight.jsの使い方

公開日：2015年01月14日
記事NO：00112