« SyntaxHighlighter を使ってみる（導入編） JavaScript

SyntaxHighlighter を使ってみる（使い方編） JavaScript

「SyntaxHighlighter を使ってみる（導入編）」に引き続き、今回はソースコードを記述する際の様々な使い方を試してみます。

まずは標準の記述法で書いたときの表示です。

<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>

ソースコードのコピー

3系になってからFlashを使ったクリップボードへのコピーがなくなり、ソースコードをダブルクリックするとコードが全選択状態になるのでそこから自分でコピーするようになりました。

最初の行番号を変える

<pre class="brush:html first-line:100">
<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>
</pre>

上記記述のようにclass属性に「first-line:行番号」を追加します。今回100行目を最初の行に指定しています。表示結果は下記のように100行目スタートになります。

<h4 class="id_title4 first-line:100">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>

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

<pre class="brush:html highlight:[1,4]">
<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>
</pre>

class属性に「highlight:[行番号]」を追加します。複数行の場合は「highlight:[行番号,行番号,行番号]」のようにカンマ区切りで行番号を指定します。上記の例では1行目と4行目をハイライトするように指定しているので下記のような表示結果になります。

<h4 class="id_title4 first-line:100">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>

他言語のソースコードとHTMLを同時に色分けする

<p>下にあるボタンをクリックしてください。</p>
<input type="submit" value="am" name="time">
<input type="submit" value="pm" name="time">
<p>
<?php
if (isset($_GET["time"])) {
    if ($_GET["time"] == "am") {
        echo ("午前です。\n");
    } else if ($_GET["time"] == "pm") {
        echo ("午後です。\n");
    } 
}
?>
</p>

PHPとHTMLが混在している上記のソースコードを「<pre class="brush:html">」のようにHTML指定して表示させるとHTMLしか色分けされません。

<pre class="brush:html">
<p>下にあるボタンをクリックしてください。</p>
<input type="submit" value="am" name="time">
<input type="submit" value="pm" name="time">
<p>
<?php
if (isset($_GET["time"])) {
    if ($_GET["time"] == "am") {
        echo ("午前です。\n");
    } else if ($_GET["time"] == "pm") {
        echo ("午後です。\n");
    } 
}
?>
</p>
</pre>

次に「<pre class="brush:php">」のようにPHP指定して表示させるとPHPしか色分けされません。

<pre class="brush:php"><p>下にあるボタンをクリックしてください。</p>
<input type="submit" value="am" name="time">
<input type="submit" value="pm" name="time">
<p>
<?php
if (isset($_GET["time"])) {
    if ($_GET["time"] == "am") {
        echo ("午前です。\n");
    } else if ($_GET["time"] == "pm") {
        echo ("午後です。\n");
    } 
}
?>
</p>
</pre>

そんなときは「<pre class="brush:php html-script: true">」のようにHTML以外の言語を標準指定してclass属性に「html-script: true」を追加すると下記のようにPHPもHTMLも色分けされて表示されます。

<pre class="brush:php html-script: true">
<p>下にあるボタンをクリックしてください。</p>
<input type="submit" value="am" name="time">
<input type="submit" value="pm" name="time">
<p>
<?php
if (isset($_GET["time"])) {
    if ($_GET["time"] == "am") {
        echo ("午前です。\n");
    } else if ($_GET["time"] == "pm") {
        echo ("午後です。\n");
    } 
}
?>
</p>
</pre>

行番号を表示させない

<pre class="brush:html gutter: false">
<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>
</pre>

class属性に「gutter: false」を追加します。すると行番号が表示されなくなります。

<h4 class="id_title4 first-line:100">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>

ソースをコードを隠す

ソースコードをたたんで非表示にしておき、クリックで表示させることができます。

<pre class="brush:html collapse: true; toolbar: true">
<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>
</pre>

class属性に「collapse: true; toolbar: true」を追加します。すると下記のようにソースコードがたたまれて表示されなくなり、クリックすることでソースコードが表示されます。長いソースコードを書く場合には重宝しそうです。

<pre class="brush:html collapse: true; toolbar: true">
<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>
</pre>

ソースコードにタイトルをつける

<pre class="brush:html" title="ソースコードにタイトルをつける">
<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>
</pre>

title属性の値に表示したいタイトルを記述します。今まではclass属性に値を追加していたのですが、今回は「title="ソースコードにタイトルをつける"」のようにtitle属性が追加されているので注意。

<pre class="brush:html" title="ソースコードにタイトルをつける">
<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>
</pre>

IE8でHTMLの要素が大文字になってしまうのを直す

下記のように、実体参照を使わずにHTMLのソースコードを<pre>タグの中に記述すると、IE8でHTMLの要素が大文字で表記されたり、「<br />」が「<BR>」と表示されてしまいます。FireFoxではきちんと表示されるので、実体参照しなくてもHTMLが記述できて便利～と思っていたのですが、きちんと書かなければダメですね・・・。

※実体参照とはHTMLで意味を持つマークアップ記号を表記するときに使う記述で、代表的なものは以下のとおり。

文字	実体参照
<	<
>	>
&	&
"	"

<pre class="brush:html">
<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>
</pre>

上記のように実体参照を使わないで記述してしまうと、IE8でHTMLの要素が大文字になってしまったり、「<br />」が「<BR>」と表示されてしまう。

<PRE class=brush:html>
<H4 class=id_title4>使用用途</H4>
<P>
移動先のページやページ内の特定の場所を指定する<BR>
HTMLだけでなく、画像や音声にリンクを指定することもできる
</P>
</PRE>

なので、HTMLを記述するときは普段どおり実体参照を使って書きます。

&lt;pre class="brush:html"&gt;
&lt;h4 class="id_title4"&gt;使用用途&lt;/h4&gt;
&lt;p&gt;
移動先のページやページ内の特定の場所を指定する&lt;br /&gt;
HTMLだけでなく、画像や音声にリンクを指定することもできる
&lt;/p&gt;
&lt;/pre&gt;

すると、要素がきちんと小文字で表示されます。

<pre class="brush:html">
<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>
</pre>

デザインテーマを変える

SyntaxHighlighterにはデザインテーマがいくつかあり、stylesフォルダにあるデザインテーマCSSを読み込むことで簡単にデザインを変えることができます。「SyntaxHighlighter を使ってみる（導入編）」でライブラリの読み込みをしましたが、実はそこで一緒にデザインテーマCSSも読み込ませていました。

<script type="text/javascript" src="http://-YourServer-/scripts/shCore.js" charset="Shift_JIS"></script>

<script type="text/javascript" src="http://-YourServer-/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://-YourServer-/scripts/shBrushPhp.js"></script>

<link type="text/css" rel="stylesheet" href="http://-YourServer-/styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="http://-YourServer-/styles/shThemeDefault.css" />

<script type="text/javascript">
SyntaxHighlighter.all();
</script>

7行目で読み込んでいるのがデザインテーマのCSSです。現在は初期設定デザインの「shThemeDefault.css」を読み込ませていますが、ここを書き換えて別のデザインテーマCSSを読み込ませるとデザインが変わります。

<link type="text/css" rel="stylesheet" href="http://-YourServer-/styles/shThemeEmacs.css">

上記のように「shThemeEmacs.css」を読み込ませるとEmacs風のデザインになります。用意されているデザインテーマは下記の表のとおりなので好きなデザインテーマを見つけて該当ファイルを読み込ませます。

デザインテーマ	対応ファイル	表示サンプル
Default	shThemeDefault.css	Default－表示サンプル
Django	shThemeDjango.css	Django－表示サンプル
Eclipse	shThemeEclipse.css	Eclipse－表示サンプル
Emacs	shThemeEmacs.css	Emacs－表示サンプル
FadeToGrey	shThemeFadeToGrey.css	FadeToGrey－表示サンプル
MDUltra	shThemeMDUltra.css	MDUltra－表示サンプル
Midnight	shThemeMidnight.css	Midnight－表示サンプル
RDark	shThemeRDark.css	RDark－表示サンプル

奇数行と偶数行で色分けする

デザインに関する部分はstylesフォルダにあるCSSを書き換えます。奇数行、偶数行の背景色について書かれているのは「shThemeDefault.css」です。

.syntaxhighlighter .line.alt1 {
  background-color: #FAFAFA !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}

22行目の「.syntaxhighlighter .line.alt1」が偶数行の設定なので、ここの背景色を変えます。このブログでは薄いグレーの「#FAFAFA」を指定しています。奇数行も変えたい場合は26行目のbackground-colorプロパティの値を変えましょう。

最後に今日やったことのおさらい

いろいろと試してみましたが、本家サイトの「http://alexgorbatchev.com/」の情報が新鮮かつ正確ですので訪れてみてください。圧縮前のshCore.jsファイルをアップロードすると動かなかったのですが、なぜなんでしょう？誰か教えて～～。

ページトップへ

Ingwer Design　-　とにかくやってみるブログ

とにかくなんでもやってみる・・・の結果報告です。

SyntaxHighlighter を使ってみる（使い方編） JavaScript

ソースコードのコピー

最初の行番号を変える

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

他言語のソースコードとHTMLを同時に色分けする

行番号を表示させない

ソースをコードを隠す

ソースコードにタイトルをつける

IE8でHTMLの要素が大文字になってしまうのを直す

デザインテーマを変える

奇数行と偶数行で色分けする

最後に今日やったことのおさらい

JavaScriptの記事

関連記事

アクセスランキング

最近のブログ記事

Ingwer Design - とにかくやってみるブログ

とにかくなんでもやってみる・・・の結果報告です。

SyntaxHighlighter を使ってみる（使い方編） JavaScript

ソースコードのコピー

最初の行番号を変える

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

他言語のソースコードとHTMLを同時に色分けする

行番号を表示させない

ソースをコードを隠す

ソースコードにタイトルをつける

IE8でHTMLの要素が大文字になってしまうのを直す

デザインテーマを変える

奇数行と偶数行で色分けする

最後に今日やったことのおさらい

JavaScriptの記事

関連記事

アクセスランキング

最近のブログ記事

Ingwer Design　-　とにかくやってみるブログ