SyntaxHighlighter を導入してみた

更新
2013年07月04日(木)

ちょくちょくブログをカスタマイズするお勉強をしてます。つまり HTML と CSS の勉強中です。

独学なので見様見真似ですが、少しずつ成長しているような気がします(笑)

今回はソースコードを表示するのに、『SyntaxHighlighter』を使うと便利で表現力が上がるということで、導入してみました。

Alex Gorbatchev
SyntaxHighlighter
⇒http://alexgorbatchev.com/SyntaxHighlighter/

SyntaxHighlighterとは

  1. ソースコードをHTMLで表示するとき、通常ならば <pre>~</pre> タグを使う方法が一般的かと思います。

  2. <pre>タグを使うと、こんな感じにソースコードが表示されます。

    <p class="picto yubi point maru">Alex Gorbatchev<br />
    <a href="http://alexgorbatchev.com/SyntaxHighlighter/" target="_blank" title="SyntaxHighlighter">SyntaxHighlighter</a><br />
    ⇒http://alexgorbatchev.com/SyntaxHighlighter/</p>
    
  3. これでは見た目が悪いし、ブログの雰囲気が壊れます。

  4. そこで、ソースコードを魅力的に表現すべく様々なツールがあります。

  5. その中でも有名なのが『SyntaxHighlighter』です。

  6. 『SyntaxHighlighter』を使うと、こんな感じにソースコードが表示されます。

    <p class="picto yubi point maru">Alex Gorbatchev<br />
    <a href="http://alexgorbatchev.com/SyntaxHighlighter/" target="_blank" title="SyntaxHighlighter">SyntaxHighlighter</a><br />
    ⇒http://alexgorbatchev.com/SyntaxHighlighter/</p>
    
  7. ダブルクリックでソースコードの全範囲選択ができます。

参考リンク

  1. Google検索『 SyntaxHighlighter

  2. ホームページ 作成、運営、管理ガイド NetyaSun
    行番号や各行背景色で見やすい ソースコード ビュー ライブラリ SyntaxHighlighter
    ⇒http://www.netyasun.com/syntaxhighlighter/index.html

  3. All About デジタル
    SyntaxHighlighterでソースを読みやすく掲載する方法
    ⇒http://allabout.co.jp/gm/gc/406309/

  4. ASCII.jp
    技術系サイトに必需品! ソースコードは鮮やかに
    ⇒http://ascii.jp/elem/000/000/401/401907/

  5. Google検索『 SyntaxHighlighter FC2ブログ

  6. インターネットとかシロクマとか
    FC2 ブログでSyntaxHighlighterを使ってソースコードを表示する。
    ⇒http://white-bear.info/archives/85

  7. 初心者によるブログの勉強のためのブログ
    ソースコードをきれいにページに記載する方法
    ⇒http://blog.livedoor.jp/kamikaze_cyclone/archives/15667732.html

  8. 初心者がWEB開発に挑戦
    FC2ブログでSyntaxHighlighterを使うには
    ⇒http://naka7772.blog.fc2.com/blog-entry-216.html

FC2ブログへの導入

準備

  1. 上記サイトを参考に、情報をまとめてみました。

  2. まずは本家サイトからダウンロードします。

  3. Alex Gorbatchev
    SyntaxHighlighter
    ⇒http://alexgorbatchev.com/SyntaxHighlighter/

  4. 右側にある「Download」から最新のものをダウンロード。執筆時においてV3.0.83

  5. [zip]形式で圧縮されているので、任意の場所に展開(解凍)してください。

  6. バージョン v.2 と v.3 では機能も見た目も大きく違うので、解説サイトがどちらを利用しているか要注意してください。

  7. バージョン v.2 と v.3 の違いについては下記リンク先を参照

  8. http://blog.remora.cx
    【Javascript】SyntaxHighlighter 3.0 の新機能と注意点
    ⇒http://blog.remora.cx/2010/07/new-function-of-syntaxhighlighter-3.html

アップロード

アップロードするもの

  1. 展開(解凍)してできたフォルダ[scripts][styles]から、必要なものと任意のものをアップロードします。

  2. フォルダ名[scripts]にはJavaScript(拡張子.js)が、[styles]にはCSS(拡張子.css)が入ってます。

  3. アップロード方法は画像のアップロードと同様の方法で、各自のサーバー領域にアップロードします。

CSS

  1. [styles]から必要なものは

    • shCore.css
  2. スタイル(外観)を変更することもできます。

  3. スタイルを変更する方法は2通りあります。

  4. その1
    [shCore.css]に加え[shTheme***.css]を読み込む方法(例:[shCoreThemeEmacs.css])

  5. その2
    [shCore***.css]を直接読み込む方法(例:[shCoreEmacs.css])
    ※この方法の場合は[shCore.css]は不要

  6. スタイルを随時変更したい場合はその1、全て統一しておきたい場合はその2が適当になる。

JavaScript

  1. [scripts]から必須なものは

    • shAutoloader.js
    • shCore.js
    • shLegacy.js
  2. [scripts]から任意なものは、今回はとりあえずHTML・CSS・JavaScript用の3つ

    • shBrushCss.js
    • shBrushJScript.js
    • shBrushXml.js

テンプレート編集

  1. テンプレートの編集画面でHTML部分に下記を記述する。

  2. ヘッド部分(head)に下記を記述する。私の場合</head>の直前あたりに記載した。

    <!-- ▼ SyntaxHighlighter head 開始 ▼-->
    <link type="text/css" rel="stylesheet" href="[アップロード先]/shCore.css" />
    <link type="text/css" rel="stylesheet" href="[アップロード先]/shThemeDefault.css" />
    <script type="text/javascript" src="[アップロード先]/shCore.js"></script>
    <script type="text/javascript" src="[アップロード先]/shAutoloader.js"></script>
    <script type="text/javascript" src="[アップロード先]/shLegacy.js"></script>
    <script type="text/javascript" src="[アップロード先]/shBrushXml.js"></script>
    <!-- ▲ SyntaxHighlighter head 終了 ▲ -->
    
  3. アップロード先のサーバーは各自によって異なるので、[アップロード先]と記述しています。

  4. 私の場合では[アップロード先]は http://blog-imgs-60.fc2.com/k/u/m/kumarajyu/***.css となりました。

  5. スタイル(外観)はデフォルト表示用の[shThemeDefault.css]にしました。ここは各自で選択したものに変更してください。

  6. 注意すべきは [shBrushXml.js] で、これは予め別個に読み込んでおいた方がよい。そうしないと html-script オプション(HTML に埋め込まれたスクリプト(Javascript + HTML な文書など)をハイライトするときに使うオプション。)が使えない

  7. http://blog.remora.cx
    【Javascript】SyntaxHighlighter 3.0 の新機能と注意点
    ⇒http://blog.remora.cx/2010/07/new-function-of-syntaxhighlighter-3.html

  8. ボディ部分(body)に下記を記述する。私の場合</body>の直前あたりに記載した。

    <!-- ▼ SyntaxHighlighter body 開始 ▼-->
    <script type="text/javascript">
    SyntaxHighlighter.autoloader
    (
    "xml xhtml xslt html    [アップロード先]/shBrushXml.js",
    "css                    [アップロード先]/shBrushCss.js",
    "js jscript javascript  [アップロード先]/shBrushJScript.js"
    );
    SyntaxHighlighter.config.bloggerMode=true;
    SyntaxHighlighter.defaults['auto-links'] = false;
    SyntaxHighlighter.defaults['toolbar'] = false;
    SyntaxHighlighter.all();
    </script>
    <!-- ▲ SyntaxHighlighter body 終了 ▲ -->
    
  9. こちらも[アップロード先]を各自のものに変更してください。

  10. HTML・CSS・JavaScript用以外も導入するのであれば、上記リンク先を参照して記述を追加してください。

  11. ここではブロガーモード[bloggerMode]をオン(true)にしてます。ブロガーモードはHTMLの改行用コード <br /> を表示しないようになります。

  12. FC2ブログの投稿設定で[自動改行]を[改行をそのまま反映]にしている場合はオンにします。[HTMLタグ以外は無視]に設定している場合は記述不要です。

  13. [auto-links][toolber]をオフ(false)にしてます。

  14. 機能設定の内容については下記等を参照してください。

  15. SyntaxHighlighter
    configuration
    ⇒http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

ソースコード記載方法

特殊文字の変換

  1. 大前提として、<pre></pre>で記述する場合、ソースコードに含まれるHTML特殊文字はエスケープに変換します。

  2. HTML特殊文字 変換対応表

    特殊文字エスケープ
    &quot;
    &&amp;
    <&lt;
    >&gt;
  3. Wikipedia「文字参照
    ⇒http://ja.wikipedia.org/wiki/%E6%96%87%E5%AD%97%E5%8F%82%E7%85%A7

  4. 逐一変換するのが面倒な場合は、下記のような変換サービスを利用します。

  5. ホームページ 作成、運営、管理ガイド NetyaSun
    HTMLソースコード変換
    ⇒http://www.netyasun.com/syntaxhighlighter/source-escape.html

記載方法

  1. 下記リンク先がよくまとまっていると感じました。

  2. http://attosoft.info
    まとめ:SyntaxHighlighter Evolved の使い方 (設定&記述例)
    ⇒http://attosoft.info/blog/syntaxhighlighter-usage/

  3. 872 Style 鼻血会 硬式サイト
    SyntaxHighlighter 3 設定方法
    ⇒http://www.872style.com/872/memo/web/SyntaxHighlighter.php

  4. ソースコードの記載方法は主に2通りあります。

  5. ソースコードの記載方法その1
    <pre>タグを使う

  6. その1 <pre>タグを使う方法

    <pre class="brush: html;">
    ここにソースコードを記述する
    </pre>
    
  7. ソースコードの記載方法その2
    <script>タグを使う

  8. その2 <script>タグを使う方法

  9. <script>タグを使う場合、エスケープに変換しなくても表示されるが、RSSリーダーで読み飛ばされる可能性があるそうです。その他注意点は下記リンク参照。

  10. blog.remora.cx
    SyntaxHighlighter には pre タグではな< script タグがお得
    ⇒http://blog.remora.cx/2010/10/syntaxhighlighter-with-script-tag.html

  11. HTMLを記述する場合、どちらも class="brush: html;" を記述します。
    htmlxml と記載してもOKです。

  12. CSSを記述する場合、どちらも class="brush: css;" を記述します。

  13. JavaScriptを記述する場合、どちらも class="brush: javascript;" を記述します。
    javascriptjs と記載してもOKです。

  14. CSSやJavaScriptを記述する場合に、一緒にHTMLも強調表記にしたい場合
    class="brush: css; html-script: true;"
    class="brush: js; html-script: true;"
    というように class="html-script: true;" を記述します。

  15. タイトルを表示する場合、title="(タイトル)" と記述を追加します。

CSSのアレンジ

  1. CSSのアレンジ方法の紹介です。

  2. [!important]を記述するのが要注意ポイントだそうです。

  3. [shTheme***.css]とThemeを使っている場合、こちらを編集。

  4. InternetExplorer や Chrome で表示される不必要な縦軸の表示を消す方法

  5. 下記コードをCSS末尾に書き加える。もしくは該当箇所を編集する。

    .syntaxhighlighter {
      overflow: auto !important;      /*autoであることを確認*/
      overflow-y: hidden !important;  /*追加*/
    }
    
  6. デフォルトだとIEで最後の行が表示されないので、表示させる方法

  7. 下記コードをCSS末尾に書き加える。もしくは該当箇所を編集する。

    .syntaxhighlighter table {
      margin-bottom: 1em !important;  /*追加*/
    }
    
  8. 多くのサイトでは上記編集を行っていますが、下記のような記述を推奨しているサイトもあります。

  9. 下記コードをCSS末尾に書き加える。もしくは該当箇所を編集する。

    .syntaxhighlighter.ie {
    font-size: .9em !important;
    /* padding: 1px 0 1px 0 !important; */
    padding: 1px 0 20px 0 !important;  /* 修正 */
    }
    
  10. 今日のPython
    ブログ上でプログラムソースを表示する方法③ IEでの表示エラーを直す
    ⇒http://blog1.erp2py.com/2011/03/ie.html

  11. 奇数行と偶数行で色を変えてストライプ状にする方法

  12. 下記コードをCSS末尾に書き加える。もしくは該当箇所を編集する。

    .syntaxhighlighter .line.alt2 {
        background-color: #F8F8F8 !important;
    }
    
  13. stainless-note
    ソースコードを美しく公開する方法 - 「SyntaxHighlighter」の使い方
    ⇒http://stainless-note.tumblr.com/post/37861044002/syntaxhighlighter

  14. タイトル部分のデザインの変更方法

  15. 下記コードをCSS末尾に書き加える。もしくは該当箇所を編集する。

    /*余白部分の修正*/
    .syntaxhighlighter table caption {
      text-align: left !important;
      padding: 0 0 0 1em !important;  /*変更*/
    }
    /*タイトル背景色*/
    .syntaxhighlighter table caption {
      color: black !important;
      background-color: #6ce26c !important;  /*追加*/
    }
    
  16. CreaMo! クリーモ!
    ソースコードを表示するSyntaxHighlighterを導入する際の注意点
    ⇒http://creamo.jp/webtech/syntaxhighlighter/

  17. 上記以外にも様々なCSSアレンジ方法があります。

テスト

前置き

  1. 現在のブログテンプレートはcustomtemplate氏が作成された「customtemplate v1.5.0」を使用しています。

  2. カスタムテンプレート
    fc2blog共有テンプレート customtemplate の説明
    ⇒http://customtemplate.blog112.fc2.com/blog-entry-1.html

  3. このテンプレートでは各文章・段落ごとにナンバリングされるようになっています。

  4. そのため、各文章は箇条書き(リスト)になっており、<li></li>タグで綴じられています。

  5. 他のテンプレート利用者の方は<li></li>タグを無視してください。

  6. 比較用に <pre> ~ </pre> タグを使った場合を併記します。

マウスオーバーで画像を切り替える

  1. マウスカーソルを重ねると画像が切り替わる

    giftest_01.gif
  2. <pre>を使った場合

    <img src="画像のURL"
     alt="画像タイトル"
     border="0"
     width="***"
     height="***"
     onmouseover="this.src='切り替える画像のURL';"
     onmouseout="this.src='元の画像のURL';"
     />
    
  3. <pre class="brush: html;">を使った場合

    <img src="画像のURL"
     alt="画像タイトル"
     border="0"
     width="***"
     height="***"
     onmouseover="this.src='切り替える画像のURL';"
     onmouseout="this.src='元の画像のURL';"
     />
    
  4. 重要な個所をハイライトにしてみました。

  5. ハイライトにするには class="highlight: [数値,数値,…];" というように記述する。数値はハイライトする行番号を記入すること。

左回り込み

  1. ここでの回り込み記述方法は「customtemplate v1.5.0」の機能なので、お使いのテンプレートが対応していない可能性があります。

  2. chunli-xvs.gif

    画像 左回り込み

    『これは冬服』

  3. <pre>を使った場合

    <li class="ofh">
    <div class="floatl">画像</div>
    <p class="p">文章</p>
    </li>
    
  4. <pre class="brush: html;">を使った場合

    <li class="ofh">
     <div class="floatl">画像</div>
     <p class="p">文章</p>
    </li>
    

右回り込み

  1. ここでの回り込み記述方法は「customtemplate v1.5.0」の機能なので、お使いのテンプレートが対応していない可能性があります。

  2. chunli-xvs3.gif

    画像 右回り込み

    『これは夏服よ』

  3. <pre>を使った場合

    <li class="ofh">
    <div class="floatr">画像</div>
    <p class="p">文章</p>
    </li>
    
  4. <pre class="brush: html;">を使った場合

    <li class="ofh">
     <div class="floatr">画像</div>
     <p class="p">文章</p>
    </li>
    
関連記事
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

コメント

コメントの投稿

非公開コメント


トラックバック


この記事にトラックバックする(FC2ブログユーザー)

ブログテンプレート必須編集項目5 SyntaxHighlighter
ブログでソースコードを記載する可能性があるので、SyntaxHighliterを導入しておきます。 SynataxHighliterの導入方法については元祖エボリアヌーメで紹介してあるので、そちらを読んでください。 元祖エボリアヌーメ「SyntaxHighlighter を導入してみた」 SyntaxHighliterを導入しなくてもソースコードは記載できます。その場合は ...
ページ下部までご覧いただきありがとうございました。