このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

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

このエントリーをはてなブックマークに追加
サンプル


こんにちは、さち です。

ブログを書くときに
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を含む投稿はできません。必要な場合は最初のhを削って下さい。
  • 記事に直接関係ない個人のトラブルにはお答えできません。
  • Android は使用経験がないので質問を頂いても答えられません。
  • その他詳細はこちら





記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

2008-2019 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

ブログパーツ