(ちょっとメモ)SyntaxHighlighter 3.0.83 の使い方

最終更新日:2017年11月17日  (初回投稿日:2013年11月26日)

SyntaxHighlighter(シンタックス ハイライター)は、
<pre>要素のソースコードを、分かりやすく色分け表示してくます。
このブログにも使ってみたので、忘れないうちに使い方をメモっておきます。

本サイトは Prism(プリズム)に乗り換えました。
Prism の使い方は、
(ちょっとメモ)Prism の使い方(SyntaxHighlighterから乗り換えた)
をご覧ください。

2017年11月:Prismへの切替のため、本記事のソースコードを SyntaxHighlighter 3.0.83 での表示から画像に変更しました。本サイトでは SyntaxHighlighter の使用をやめますが、本記事は削除せずにこのまま保存します。

導入INDEX
  1. SyntaxHighlighter をダウンロードする
  2. 必要なファイルをチョイスしてサーバにあげる
     ★JavaScriptファイルの 対応言語一覧
     ★CSSファイルの shCore と shTheme の違い
  3. HTMLファイルに必要なファイルを読み込む
     ★基本の読み込ませ方
     ★オートローダーを使う
  4. pre要素への基本的な指定(class属性でキーワードを指定する)
     ★言語のキーワード一覧
  5. オプション機能を使う
     ★特定の行をハイライトする
     ★タイトルをつける
     ★他言語のソースコードとHTMLを同時に
     ★開始行番号を変える
     ★行番号を表示させない
     ★ソースコードをたたんでおき、クリックで表示させる
     ★ツールバーの表示・非表示
     ★ソース内のリンクをはずす
  6. CSSを編集してオリジナルのスタイルにする
     ★セレクタは「pre」でなく「.syntaxhighlighter」
     ★オールド IE 用のセレクタは「コア」部分の「.ie」
     ★オリジナルの「クラス名」を設定することもできます

SyntaxHighlighter をダウンロードする


バージョンは何年も前から変わっていないようです。
*このページで現在ダウンロードできなくなっており、Github からダウンロードできるようですが、それも2年前のファイルです。(2017年11月記)

*ちなみに、WordPressのプラグインは「SyntaxHighlighter Evolved」です。
使い方を「超初心者のサーバ移転とドメイン移管」のほうにアップしています。
興味のある方はこちらもご覧ください。

SyntaxHighlighter の必要なファイルをチョイス

ダウンロードしたモノを解凍すると、下図のようになっています。
実際に使用するファイルは、
「scripts」の中の JavaScriptファイル。
「styles」の中の CSSファイル。
この2つのフォルダを、サーバにごっそりアップしてもいいし、
必要なファイルだけピックアップしてもOK。

JavaScriptファイルについて(対応言語一覧)

このうち shCore.js は必須です
コレ以外の「shBrush...」とついているものから、必要な対応言語のものをチョイス。
例えば、CSS と JavaScript、HTML をブラッシュアップしたいなら、
「shBrushCss.js」「shBrushJScript.js」「shBrushXml.js」を選びます。
ファイルの対応言語は以下のとおり。

対応言語 「scripts」内のファイル名 対応言語 「scripts」内のファイル名
アップルスクリプト shBrushAppleScript.js JavaScript shBrushJScript.js
ActionScript3 shBrushAS3.js Perl shBrushPerl.js
Bash/shell shBrushBash.js PHP shBrushPhp.js
ColdFusion shBrushColdFusion.js プレーンテキスト shBrushPlain.js
C++ shBrushCpp.js PowerShell shBrushPowerShell.js
C# shBrushCSharp.js Python shBrushPython.js
CSS shBrushCss.js Ruby shBrushRuby.js
Delphi shBrushDelphi.js SASS SCSS shBrushSass.js
Diff shBrushDiff.js Scala shBrushScala.js
Erlang shBrushErlang.js SQL shBrushSql.js
Groovy shBrushGroovy.js Visual Basic shBrushVb.js
shBrushJava.js Java XML, HTML,
XHTML, XSLT
shBrushXml.js
shBrushJavaFX.js JavaFX  

CSSファイルについて(shCore と shTheme の違い)

「shCore.css」は「コア」スタイルで、設定の初期化等を担っています。
「shTheme○○○.css」という名前のCSSファイルは「テーマ」別の装飾の指定です。
なので「shCore.css」と「shTheme○○○.css」は一緒に使います。

「shCore○○○.css」というネーミングのCSSファイルは、
「コア」と「テーマ」の内容を合体させたモノなので、1つだけ読み込めばOK
(例えば「shCore.css」と「shThemeDjango.css」を読み込んでも、 「shCoreDjango.css」だけを読み込んでも、同じプレビューになります。)

ダウンロードファイルの中の「index.html」は簡単なデモ。
スタイルは「shCoreDefault.css」になっています。ここで CSSをいろいろ変更して、好みのものを選びます。CSSは編集もできます

2つばかり、プレビューを紹介。
上は「shCoreDjango.css」。このように黒バックのものが多いようです。
下は「shCoreEclipse.css」。

SyntaxHighlighter の必要なファイルをHTMLに読み込む

SyntaxHighlighter の読み込み(基本)

下記のように、shCore.js(必須)と、そのほかのチョイスしたJavaScript ファイル全部と、お好きなスタイルのCSSファイルを読み込みます。相対URLでも絶対URLでもOK。
最後の「<script>SyntaxHighlighter.all();</script>」(7行目)を書くのを忘れずに。

SyntaxHighlighter のオートローダーを使う

たくさんの言語に対応させたい場合、オートローダー(shAutoloader.js)を使うほうが、ロードが速いそうです。
この場合「scripts」フォルダの中身を丸ごと全部サーバにアップしたほうが合理的。
で、<head>部分には下記のように、shCore.js と shAutoloader.js を読み込み、
あとは好きなスタイルのCSSを読み込ませます。相対URLでも絶対URLでもOK。

そして、そのページに必要なスクリプトを、<body>内に書きますが、
コレは </body>の直前(body 要素の1番最後)に書くのがミソ。
Autoloader は、使用する箇所が全て読み込まれないと言語を判別できないため、一番最後に。
最後(29行目)の「SyntaxHighlighter.all();」も忘れずに!
下のソースでは全部の言語を入れていますが、実際はもちろん使うものだけを書きます。
ここでも、相対URL、絶対URLのどちらでもOK。

SyntaxHighlighter の基本的な指定

ココまでの準備ができたら、あとは<pre>に class属性で「class="brush:言語のキーワード"」を書くだけ。
例えば HTML、CSS、JavaScript、PHP なら、それぞれ下記のように指定します。

SyntaxHighlighter の「言語のキーワード」はこちら。

対応言語 キーワード
複数あるものは、どれか1つをチョイス
「scripts」内のファイル名
ActionScript3as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
ColdFusion cf, coldfusion shBrushColdFusion.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Erlang erl, erlang shBrushErlang.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js

SyntaxHighlighter のオプションを使う

★特定の行をハイライトする

★タイトルをつける

★他言語のソースコードとHTMLを同時に
HTML以外の言語を指定してから、半角スペースを空けて「html-script:true」と書けば、
両方とも色分けされます。(下記は、JavaScript と HTMLの例)

★開始行番号を変える

★ツールバーの表示・非表示
「toolbar」とは、<pre>の右上に出てくる小さな「?」マーク。これを非表示にできます。

★ソース内のリンクをはずす
ソース内にURLがあると、デフォルトでリンクを貼りますが、「auto-links:false」にすれば、ソース内のリンクをはずせます。

CSSを編集してオリジナルのスタイルに

セレクタは「pre」でなく「.syntaxhighlighter」

<pre>要素に「class="brush:○○"」と指定すると、スタイルのセレクタが「.syntaxhighlighter」になります。
オリジナルのスタイルにするには、読み込んだCSSを開いて「.syntaxhighlighter」の部分を編集します。
コアとテーマの合体版(shCore○○○.css)なら228行目あたりから、
テーマ(shTheme○○○.css)なら冒頭の17行目あたりからです。

セレクタと、それが何を指定するものなのかピックアップしてみました↓

.syntaxhighlighter
これ↑が全体を囲むモノ(<pre>要素にあたるものと思ってOK)
・「width:auto」にしとけば親の幅が変わっても領域内に収まります。
・あとは padding、background、borderなどの指定を適宜に。角丸の指定もココ
.syntaxhighlighter .line.alt1
偶数行(偶数行か奇数行のどっちかの背景色を変えると、行が読みやすくなります)
.syntaxhighlighter .line.alt2
奇数行(偶数行か奇数行のどっちかの背景色を変えると、行が読みやすくなります)
.syntaxhighlighter .line.highlighted.alt1,
.syntaxhighlighter .line.highlighted.alt2
各行のハイライト時(背景色や文字色を変えて目立たせます)
.syntaxhighlighter table caption
title属性でつけたタイトル(キャプション)
.syntaxhighlighter .gutter
行番号部分
・背景色や文字色などを指定します。
.syntaxhighlighter .gutter .line
行番号部分のライン
「border-right: 2px solid #ddd」などと「border-right」で右側の線のスタイル・色などを指定。borderは右以外にも効くけど、みっともないから右だけにしといたほうが無難。
.syntaxhighlighter .gutter .line.highlighted
行番号部分のハイライト時(背景色や文字色を変えて目立たせます)
.syntaxhighlighter .toolbar
toolbar(右上の「?」)のスタイル
文字色・背景色、border、marginなどを編集します。

SyntaxHighlighterのCSSは、値の最後に!important(優先順位をあげる記述)が必ず付いています。コレは無くても動作しましたが、何か不具合があったら困るので、そのまま付けておきました。
!importantについては、こちら↓に詳細を書いています。
【4】CSSの優先度のルール(ブラウザが混乱しないためのルールだよ)

SyntaxHighlighter のスタイル上の構造

SyntaxHighlighter はブラウザに出力さると、HTMLコードは<pre>のままですが、スタイル指定では下記のように div と table の組み合わせになるよう設計されています。

全体がクラス名「SyntaxHighlighter」という<div>要素、その中に<table>要素があって、2つの<td>要素がそれぞれ「gutter」「code」というクラスに分けられています。
それぞれの中の1行ずつが<div>で囲まれているのもわかります。

これ↑はブラウザのWeb開発ツールを使うと見れます。
Web開発ツールについては、
(ちょっとメモ)Web開発ツールでCSSがどう効いているか確認しよう
をご覧ください。

オールド IE 用のセレクタは「コア」部分の「.ie」

IE9以下の設定は別にするようになっています。
コアの155行目アタリにある「.syntaxhighlighter.ie」というセレクタ部分を編集します。
IEで見ると、文字サイズや paddingが反映されない なんて場合はココをチェック。

オリジナルの「クラス名」を設定することもできます

セレクタを「.syntaxhighlighter」でなく、オリジナルのCSSクラス名に切り替えることもできます。

自分で設定したいクラス名を「class-name: 'クラス名'」で設定します。

<head>で、オリジナルのCSSファイルは、syntaxhighlighter のCSSより後に読み込ませることが重要です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

テーマ : webサイト作成
ジャンル : コンピュータ

tag : SyntaxHighlighter

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

SyntaxHighlighter のオートローダーを使う

参考にさせていただきました。
ありがとうございます。

Re: SyntaxHighlighter のオートローダーを使う

sadtoyさん。
こちらこそ!コメントありがとうございます。

ありがとう

参考にさせていただきました。

とても分かりやすかったです。

ありがとうございます。

SyntaxHighlighterの利用

ネットでいろいろな情報を探ってみたが、ここの説明が一番わかりやすかったです。

参考にさせていただきます。ありがとうございました。

Re: ありがとう

kingdsさま
お役に立ててなによりです。こちらこそコメントありがとうございます!

Re: SyntaxHighlighterの利用

Tekitekiさま
コメントありがとうございます!お役に立ててよかったです♪

trackback


この記事にトラックバックする(FC2ブログユーザー)

SyntaxHighlighter 導入してみる

今後,ブログでコードを書く機会が増えるかもしれないんで,噂の SyntaxHighlighter を導入してみることにした。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2018/06 | 07
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.