ホーム > カテゴリ > 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


この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
プチモンテ代表、アーティスト名：プチモンテ
🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は叙情詩、叙情的な楽曲が多い。楽曲制作は2023年12月中旬 ～

オリジナル曲を始めました✨

YouTubeで各楽曲を公開しています🌈
https://www.youtube.com/@petitmonte

【男性ボーカル】DA・KA・RA | 新たな明日が風と共に訪れる

【男性、女性ボーカル】時空を超越する先に | 時空と風の交響曲

【女性、男性ボーカル】絆 | 穏やかな心に奏でる旋律