スポンサーリンク

サイトに載せるHTML, CSS, JS のコードを自動で色分け

この記事は約19分で読めます。

サンプル

こんにちは、さち です。

ブログを書くときに
HTML, CSS, JavaScript などのコードを載せることがあります。

普段、コードは対応エディタを使って書くので
「タグ」などが自動で色分け(ハイライト)されるのですが
ブログだとコードが真っ黒で見にくい!

でも、<span> タグを手動で付けて
コードを色分け(ハイライト)するのはものすごく面倒だし…。

ということで、サイトに載せるコードを
自動で色分け(ハイライト)表示をしてくれるスクリプト
「SyntaxHighlighter」を使ってみることにしました。

スポンサーリンク

サイトにコードを書くだけで自動で色分け

ウェブサイトにコードを載せるとき
普通に書くとこんな感じになってしまいますよね。
うーん、真っ黒で見にくい…!

<div id="result">
  <p id="info">目標LPまでの回復に必要なのは</p>
  <table>
    <tr><th>LP</th><td id="needLP">55</td></tr>
    <tr><th>到達予定日</th><td id="date">8/9(土) 5:21</td></tr>
    <tr><th>予定日まで あと</th><td id="time">5時間 29分</td></tr>
  </table>
</div>

そこで、このコードに「SyntaxHighlighter」を適用すると…
あら見やすい!

<div id="result">
  <p id="info">目標LPまでの回復に必要なのは</p>
  <table>
    <tr><th>LP</th><td id="needLP">55</td></tr>
    <tr><th>到達予定日</th><td id="date">8/9(土) 5:21</td></tr>
    <tr><th>予定日まで あと</th><td id="time">5時間 29分</td></tr>
  </table>
</div>

「SyntaxHighlighter」は JavaScript で動くため
コードを書くだけで自動で色分け(ハイライト)表示してくれます。
だから、導入さえしてしまえば後は手間いらず!

導入手順1/4 - 「SyntaxHighlighter」をダウンロードする

  1. SyntaxHighlighter にアクセス。
    Click here to download をクリックしてファイルをダウンロード。
    操作画面
  2. ダウンロードしたファイルを解凍。
    操作画面
  3. 解凍するとこんな感じにファイルが展開されます。
    操作画面

ファイルのダウンロードはこれで完了!
続いて、スクリプトファイルの準備をします。

導入手順2/4 - スクリプトを準備する

  1. 「scripts」フォルダを開きます。
    操作画面
  2. 色分けしたい言語を選別します(全25種)。
    「shBrush~」の後に続くのが言語名なのですぐわかるはず。
    今回は、CSS, JavaScript, PHP, SQL, XML(HTML) の5つを利用します。
    操作画面
  3. 先ほど選んだ言語とは別に
    「shAutoloader.js」と「shCore.js」の2つは必須ファイルです。
    操作画面
  4. スクリプトファイルをサーバーにアップロードします。
    例では、各言語用スクリプト5個 と 必須ファイル2個 の計7個を
    「http://example.com/sh/」にアップロードしました。
    操作画面
  5. JavaScriptファイル(拡張子:js)を新規作成します。
    例では、ファイル名を「shTrigger.js」にしました。
    このファイルに SyntaxHighlighter を発動させるコードを書いていきます。
    操作画面
  6. 新規作成した「shTrigger.js」をテキストエディターで開いて
    各言語用のスクリプトがある場所(パス)を記述します。
    場所(パス)は絶対指定,相対指定どちらでもよいです。
    公式サイトのサンプルも合わせてどうぞ)

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

    上記は見本用にすべて書きましたが
    例の場合、アップロードした言語用スクリプト5個の記述だけでOK。

    SyntaxHighlighter.autoloader(
    'css                    http://example.com/sh/shBrushCss.js',
    'js jscript javascript  http://example.com/sh/shBrushJScript.js',
    'php                    http://example.com/sh/shBrushPhp.js',
    'sql                    http://example.com/sh/shBrushSql.js',
    'xml xhtml xslt html    http://example.com/sh/shBrushXml.js'
    );
    SyntaxHighlighter.all();

     

  7. 「shTrigger.js」を保存します。
    操作画面
  8. 「shTrigger.js」をサーバーにアップロードします。
    例では、「http://example.com/sh/」にアップロードしました。
    操作画面

これで、スクリプトの準備は完了です。

shAutoloader.js を使わない方法もありますが
この記事では省略します。

続いて、CSS(スタイルシート)の準備をしていきます。

導入手順3/4 - デザインを選ぶ

  1. 「styles」フォルダを開きます。
    操作画面
  2. 使うのは「shCore~」ではじまる8個のファイルです。
    この中から1つを選びましょう。
    どれを選ぶかで色分けのデザインが変わります。
    サンプルページを見て選んで下さい。

    操作画面
  3. 今回は、「shCooreDefault.css」を使います。
    操作画面
  4. 「shCoreDefault.css」をサーバーにアップロードします。
    例では、「http://example.com/sh/」にアップロードしました。
    操作画面

これで、スタイルシート(CSS)の準備は完了です。

ちなみに、「shCoreDefault.css」は
「shCore.css」と「shThemeDefault.css」を1つにまとめたファイルなので
「shCoreDefault.css」の代わりに
「shCore.css」と「shThemeDefault.css」の2つのファイルを使っても
まったく同じ結果になります(他のデザインの場合も同様)。

導入手順4/4 - アップロードしたファイルを読み込もう

必須のスクリプト2個,スタイルシート1個
計3個のファイルを <head> タグ内で読み込みます。

<head>
  <script type="text/javascript" src="http://example.com/sh/shCore.js"></script>
  <script type="text/javascript" src="http://example.com/sh/shAutoloader.js"></script>
  <link type="text/css" rel="stylesheet" href="http://example.com/sh/shCoreDefault.css" />
</head>

スクリプトの読み込みは <body> タグ内に書いても構いませんが
2つのスクリプトのサイズは合計でも18KBなので
基本的には <head> タグに書いておけばよいと思います。

これで使用の準備はすべて整いました!

実際に使ってみよう!

  1. 色分け(ハイライト)表示したいコードを <pre> タグで囲みます。
    ただし、コードが HTML タグと認識されないように
    「<」を「&lt;」等と文字実体参照で書きます
    (テキストエディタで置換処理すると楽です)。
    さらに、<pre> タグに「class="brush: 言語の種類"」と記述。
    例では、HTML なので「class="brush: html"」としました。

    <pre class="brush: html">
    &lt;div id="result">
      &lt;p id="info">目標LPまでの回復に必要なのは&lt;/p>
      &lt;table>
        &lt;tr>&lt;th>LP&lt;/th>&lt;td id="needLP">55&lt;/td>&lt;/tr>
        &lt;tr>&lt;th>到達予定日&lt;/th>&lt;td id="date">8/9(土) 5:21&lt;/td>&lt;/tr>
        &lt;tr>&lt;th>予定日まで あと&lt;/th>&lt;td id="time">5時間 29分&lt;/td>&lt;/tr>
      &lt;/table>
    &lt;/div>
    </pre>

     

  2. <body> タグ終了直前で、先ほど自作したスクリプトを読み込みます。
    例では、「shTrigger.js」というファイル名で保存したファイルです。
    (ブログであれば記事の一番最後に記述すればよいです)

        <script type="text/javascript" src="http://example.com/sh/shTrigger.js"></script>
      </body>
    </html>

     

  3. 「shTrigger.js」が読み込まれると
    「class="brush:言語の種類"」を記述した <pre> が
    こんな感じで自動で色分け(ハイライト)表示されます。

    <div id="result">
      <p id="info">目標LPまでの回復に必要なのは</p>
      <table>
        <tr><th>LP</th><td id="needLP">55</td></tr>
        <tr><th>到達予定日</th><td id="date">8/9(土) 5:21</td></tr>
        <tr><th>予定日まで あと</th><td id="time">5時間 29分</td></tr>
      </table>
    </div>

例では、「HTML」のコードを色分け(ハイライト)表示する場合でしたが
他言語の場合、<pre> タグに記述する class は下記のとおりです。
(基本は、「スクリプトを準備する」の手順「6」に記述したものを使う)

<pre class="brush: html"> <!-- HTML -->
<pre class="brush: css"> <!-- CSS -->
<pre class="brush: js"> <!-- JavaScript -->
<pre class="brush: php"> <!-- PHP -->
<pre class="brush: sql"> <!-- SQL -->
<pre class="brush: applescript"> <!-- AppleScript -->
<pre class="brush: as3"> <!-- ActionScript3 -->
<pre class="brush: shell"> <!-- Bash/shell -->
<pre class="brush: cf"> <!-- ColdFusion -->
<pre class="brush: csharp"> <!-- C# -->
<pre class="brush: c"> <!-- C++ -->
<pre class="brush: delphi"> <!-- delphi -->
<pre class="brush: diff"> <!-- Diff -->
<pre class="brush: erl"> <!-- Erlang -->
<pre class="brush: groovy"> <!-- Groovy -->
<pre class="brush: java"> <!-- Java -->
<pre class="brush: jfx"> <!-- JavaFX -->
<pre class="brush: pl"> <!-- Perl -->
<pre class="brush: text"> <!-- Plain Text -->
<pre class="brush: ps"> <!-- PowerShell -->
<pre class="brush: py"> <!-- Python -->
<pre class="brush: ruby"> <!-- Ruby -->
<pre class="brush: sass"> <!-- Sass -->
<pre class="brush: scala"> <!-- Scala -->
<pre class="brush: vb"> <!-- Visual Basic -->

ちなみに、「shTrigger.js」は
読み込む前までに登場したコードしか処理しないので
必ず、一番最後に読み込ませるようにしましょう。
(<body> タグ終了直前に読み込ませた理由がこれ)

コードをもっと見やすくする(コンフィグ)

■指定の行をハイライト
class に「highlight:[行番号]」と書けばその行に色を付けてハイライト表示。
コンマで区切れば複数指定できます。

<pre class="brush:html; highlight:[2,5]">
<div id="result">
  <p id="info">目標LPまでの回復に必要なのは</p>
  <table>
    <tr><th>LP</th><td id="needLP">55</td></tr>
    <tr><th>到達予定日</th><td id="date">8/9(土) 5:21</td></tr>
    <tr><th>予定日まで あと</th><td id="time">5時間 29分</td></tr>
  </table>
</div>
</pre>

■タイトルを付ける
<pre> タグに「title="タイトル"」と属性を書けばコード上部にタイトルを表示。

<pre class="brush:html" title="ここにタイトルを表示">
<p>sample text</p>
</pre>

■行番号の開始番号を変更
class に「first-line:[行番号]」と書けば開始行番号を変更。

<pre class="brush:html; first-line:25">
<div id="result">
  <p id="info">目標LPまでの回復に必要なのは</p>
  <table>
    <tr><th>LP</th><td id="needLP">55</td></tr>
    <tr><th>到達予定日</th><td id="date">8/9(土) 5:21</td></tr>
    <tr><th>予定日まで あと</th><td id="time">5時間 29分</td></tr>
  </table>
</div>
</pre>

■行番号を非表示にする
class に「gutter:false」と書けば行番号が非表示に。

<pre class="brush:html; gutter:false">
<div id="result">
  <p id="info">目標LPまでの回復に必要なのは</p>
  <table>
    <tr><th>LP</th><td id="needLP">55</td></tr>
    <tr><th>到達予定日</th><td id="date">8/9(土) 5:21</td></tr>
    <tr><th>予定日まで あと</th><td id="time">5時間 29分</td></tr>
  </table>
</div>
</pre>

■HTMLと他言語の両方を色分け(ハイライト)
「brush」でHTML以外の言語を指定し、さらにclassに「html-script:true」と書くと
その言語とHTMLを同時に色分け(ハイライト)表示。

<pre class="brush:js; html-script:true">
<div id="maki">Daring!!</div>
<script>//<!--
var nico = document.getElementById('maki');
var a = 'Magnetic today';
if (nico) nico.innerHTML = a; //書き換え
//--></script>
</pre>

他のコンフィグ,CSSのカスタマイズについてもまとめる予定でしたが
記事が非常に長くなってしまうので次回の更新にまわします。
ぜひ、下記の記事も合わせて読んでみて下さいね。

→ 「SyntaxHighlight」で知らなきゃ損する7つのカスタマイズ
→ サイトに載せるバッチファイルのコードを自動で色分けする

コメント

タイトルとURLをコピーしました