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

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

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

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Amazon:スマホでPC版サイトを開いたらスマホ版に戻れなくなった (12/02)
  • Windows:アプリの音量が勝手に変更される (11/30)
  • かしこいかわいい新PC「エリーチカ」がやってきた(時々ポンコツ) (11/28)
  • Windows:目的毎,ファイルの種類(拡張子)毎に既定アプリを変更 (11/25)
  • Windows:ヘッドホン(イヤホン)から音が出ないときの対処法 (11/23)
  • 管理人より
    2000万アクセス突破しました。ありがとうございます。

    サイトに載せる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つのカスタマイズ










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




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





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

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

    ブログパーツ