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

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

<pre class="brush:html">  <!--HTMLソースを表示する-->
<pre class="brush:css">   <!--CSSソースを表示する-->
<pre class="brush:js">    <!--JavaScriptソースを表示する-->
<pre class="brush:html highlight:[2,4]">  <!--特定行をハイライト-->
<pre class="brush:js html-script:true">   <!--他言語とHTML-->
<pre class="brush:html first-line:25">    <!--開始行番号の変更-->
<pre class="brush:html toolbar:false">    <!--ツールバー非表示-->
<pre class="brush:html auto-links:false"> <!--オートリンク解除-->
<pre class="brush:html" title="タイトル">  <!--タイトル表示-->
導入INDEX

SyntaxHighlighter をダウンロードする


http://alexgorbatchev.com/SyntaxHighlighter/download/

ダウンロードページです。
バージョンは何年も前から変わっていないようです。
(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行目)を書くのを忘れずに。

<head>
<script src="../scripts/shCore.js"></script>
<script src="../scripts/shBrushJScript.js"></script>
<script src="../scripts/shBrushCss.js"></script>
<script src="../scripts/shBrushXml.js"></script>
<link rel="stylesheet" href="../styles/shCoreEclipse.css">
<script>SyntaxHighlighter.all();</script>
</head>

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

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

<head>
<script src="../scripts/shCore.js"></script>
<script src="../scripts/shAutoloader.js"></script>
<link rel="stylesheet" href="../styles/shCoreEclipse.css">
</head>

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

<script>
SyntaxHighlighter.autoloader
(
"applescript            ../scripts/shBrushAppleScript.js",
"actionscript3 as3      ../scripts/shBrushAS3.js",
"bash shell             ../scripts/shBrushBash.js",
"coldfusion cf          ../scripts/shBrushColdFusion.js",
"cpp c                  ../scripts/shBrushCpp.js",
"c# c-sharp csharp      ../scripts/shBrushCSharp.js",
"css                    ../scripts/shBrushCss.js",
"delphi pascal          ../scripts/shBrushDelphi.js",
"diff patch pas         ../scripts/shBrushDiff.js",
"erl erlang             ../scripts/shBrushErlang.js",
"groovy                 ../scripts/shBrushGroovy.js",
"java                   ../scripts/shBrushJava.js",
"jfx javafx             ../scripts/shBrushJavaFX.js",
"js jscript javascript  ../scripts/shBrushJScript.js",
"perl pl                ../scripts/shBrushPerl.js",
"php                    ../scripts/shBrushPhp.js",
"text plain             ../scripts/shBrushPlain.js",
"py python              ../scripts/shBrushPython.js",
"ruby rails ror rb      ../scripts/shBrushRuby.js",
"sass scss              ../scripts/shBrushSass.js",
"scala                  ../scripts/shBrushScala.js",
"sql                    ../scripts/shBrushSql.js",
"vb vbnet               ../scripts/shBrushVb.js",
"xml xhtml xslt html    h../scripts/shBrushXml.js"
);
SyntaxHighlighter.all();
</script>
</body>

SyntaxHighlighter の基本的な指定

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

<pre class="brush:html">  <!--HTMLソースを表示する場合-->
<pre class="brush:css">   <!--CSSソースを表示する場合-->
<pre class="brush:js">    <!--JavaScriptソースを表示する場合-->
<pre class="brush:php">   <!--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 のオプションを使う

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

<pre class="brush:html highlight:[2,4]">
<p>
2行目と4行目をハイライトします。
</p>
</pre>

★タイトルをつける

<pre class="brush:html" title="title属性でタイトルをつけます">
<p>
タイトルがあると便利
</p>
</pre>

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

<pre class="brush:js html-script:true">
<p>たとえば、</p>
<script>
document.write('JavaScriptと一緒に、HTMLも色分けして表示できます');
</script>
</pre>

★開始行番号を変える

<pre class="brush:html first-line:25">
<p>
開始の行番号を25行目にしてみた
</p>
</pre>

★行番号を表示させない

<pre class="brush:html gutter:false">
<p>
gutter: false で行番号を表示させないこともできます。<br />
(コレはちょっと左マージンが無くて変ですけどね)
</p>
</pre>

★ソースコードをたたんでおき、クリックで表示させる
(下記のソースをクリックしてください)

<pre class="brush:html; collapse:true;">
<p>
「collapse: true;」でソースをたためます。長いソースの場合に便利かも。<br />
注意:「toolbar: false」を同時に指定するとNG。うまくいきません。
</p>
</pre>

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

<pre class="brush:html toolbar:false">
<p>
「toolbar: false」で toolbar(「?」マーク)を非表示に
</p>
</pre>

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

<pre class="brush:html">
http://honttoni.blog74.fc2.com/
<!-- ↑ デフォルトではリンクが貼られています。ロールオーバーしてみて -->
</pre>
<pre class="brush:html auto-links:false">
http://honttoni.blog74.fc2.com/
</pre>

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

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

<pre>要素に「class="brush:○○"」と指定すると、スタイルのセレクタが「.syntaxhighlighter」になるように設定されています。ですので、<pre>要素にクラスや id名を付けてCSSを指定してもムダ。何も起こりません。
オリジナルのスタイルにするには、読み込んだCSSを開いて「.syntaxhighlighter」の部分を編集します。(元のファイルを別名にして取っておいたほうが安全。おかしなことになっても元に戻せるから)
コアとテーマの合体版(shCore○○○.css)なら228行目あたりから、
テーマ(shTheme○○○.css)なら冒頭の17行目あたりからです。

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

.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インスペクタという機能を使うと見れます。
Chromeなら、「Command+Option+I」で起動します(Macの場合。Winは「F12」キー)
(*Webインスペクタについては、いずれ詳細を記事にするつもりです)

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

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

.syntaxhighlighter.ie { /*「.ie」= old IE用の指定*/
  font-size: 1em !important;
  padding: 1.3em 0 1.3em 0 !important;
}
.syntaxhighlighter.ie .toolbar {
  line-height: 8px !important;
}
.syntaxhighlighter.ie .toolbar a {
  padding-top: 0px !important;
}

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

セレクタを「.syntaxhighlighter」でなく、オリジナルのCSSクラス名に切り替えることもできます。
(↓クリックで、サンプルが別ウィンドウで開きます)

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

<pre class="brush: html class-name:'pre_style'">
<!--ハイライト-->
<pre class="brush:html class-name:'pre_style' highlight:[3]">
<!--他言語とHTML-->
<pre class="brush:css html-script:true class-name:'pre_style'">
<!--toolbar:false-->
<pre class="brush:html class-name:'pre_style' toolbar:false">
<!--開始業番号の変更-->
<pre class="brush:html class-name:'pre_style' first-line:25">
<!--タイトル-->
<pre class="brush:html class-name:'pre_style'" title="タイトル">

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

<head>
<script src="../scripts/shCore.js"></script>
<script src="../scripts/shBrushJScript.js"></script>
<script src="../scripts/shBrushCss.js"></script>
<script src="../scripts/shBrushXml.js"></script>
<link rel="stylesheet" href="../styles/shCoreEclipse.css">
<link rel="stylesheet" href="../css/sh_test.css" />
<script>SyntaxHighlighter.all();</script>
</head>

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

プラグイン「SyntaxHighlighter Evolved」

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

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

tag : SyntaxHighlighter

スポンサーリンク

コメントの投稿

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

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

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

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

ありがとう

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

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

ありがとうございます。

SyntaxHighlighterの利用

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

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

Re: ありがとう

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

Re: SyntaxHighlighterの利用

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

trackback


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

SyntaxHighlighter 導入してみる

今後,ブログでコードを書く機会が増えるかもしれないんで,噂の SyntaxHighlighter を導入してみることにした。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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 31 - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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