こんにちは、さち です。
ブログを書くときに
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」をダウンロードする
- SyntaxHighlighter にアクセス。
Click here to download をクリックしてファイルをダウンロード。
- ダウンロードしたファイルを解凍。
- 解凍するとこんな感じにファイルが展開されます。
ファイルのダウンロードはこれで完了!
続いて、スクリプトファイルの準備をします。
導入手順2/4 - スクリプトを準備する
- 「scripts」フォルダを開きます。
- 色分けしたい言語を選別します(全25種)。
「shBrush~」の後に続くのが言語名なのですぐわかるはず。
今回は、CSS, JavaScript, PHP, SQL, XML(HTML) の5つを利用します。
- 先ほど選んだ言語とは別に
「shAutoloader.js」と「shCore.js」の2つは必須ファイルです。
- スクリプトファイルをサーバーにアップロードします。
例では、各言語用スクリプト5個 と 必須ファイル2個 の計7個を
「http://example.com/sh/」にアップロードしました。
- JavaScriptファイル(拡張子:js)を新規作成します。
例では、ファイル名を「shTrigger.js」にしました。
このファイルに SyntaxHighlighter を発動させるコードを書いていきます。
- 新規作成した「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();
- 「shTrigger.js」を保存します。
- 「shTrigger.js」をサーバーにアップロードします。
例では、「http://example.com/sh/」にアップロードしました。
これで、スクリプトの準備は完了です。
shAutoloader.js を使わない方法もありますが
この記事では省略します。
続いて、CSS(スタイルシート)の準備をしていきます。
導入手順3/4 - デザインを選ぶ
- 「styles」フォルダを開きます。
- 使うのは「shCore~」ではじまる8個のファイルです。
この中から1つを選びましょう。
どれを選ぶかで色分けのデザインが変わります。
サンプルページを見て選んで下さい。
- 今回は、「shCooreDefault.css」を使います。
- 「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> タグに書いておけばよいと思います。
これで使用の準備はすべて整いました!
実際に使ってみよう!
- 色分け(ハイライト)表示したいコードを <pre> タグで囲みます。
ただし、コードが HTML タグと認識されないように
「<」を「<」等と文字実体参照で書きます(テキストエディタで置換処理すると楽です)。
さらに、<pre> タグに「class="brush:言語の種類"」と記述。
例では、HTML なので「class="brush:html"」としました。<pre class="brush:html"> <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>
- <body> タグ終了直前で、先ほど自作したスクリプトを読み込みます。
例では、「shTrigger.js」というファイル名で保存したファイルです。
(ブログであれば記事の一番最後に記述すればよいです)<script type="text/javascript" src="http://example.com/sh/shTrigger.js"></script> </body> </html>
- 「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を除去するのを忘れていました。
最初からやり直しということで、
3.083を導入しようとしているわけですが、なぜかジャバスクリプトが発動しません。
各スクリプトへのパスが間違っているわけでもないので、どうしても原因がわかりません。
問題のアドレスは
「ttp://www.transformsite.com/Syntax3-test.html」
ですが、直接ソースなどを見て戴いて、ご判断を仰ぎたいのです。
どうぞ、よろしくお願い致します。
すみません。時間の都合上、そのような依頼はお受けできません。
(一度受けると、他の方からの同様の依頼が断りにくいため)
この記事の内容について疑問があればお答えできますので
今一度読み返して設定を見直してみて下さい。