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

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

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

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



最新記事
  • Windows:画面外に出てしまったウィンドウを引き戻す (07/19)
  • Windows:「クイックアクセス」にフォルダーが勝手に追加される (07/17)
  • Windows:接続中のWi-Fi(無線LAN)の種類を調べる (07/14)
  • ニコニコ生放送:視聴中断後、簡単に続きから再生する方法 (07/12)
  • Windows:移動するファイルを間違えた時に一発キャンセルする (07/10)
  • 管理人より
    2200万アクセス突破しました。ありがとうございます。

    「SyntaxHighlighter」で知らなきゃ損する7つのカスタマイズ

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


    こんにちは、さち です。

    前回の記事
    ウェブサイトに載せるコードを自動で色分け(ハイライト)表示する
    「SyntaxHighlighter」を紹介しました。

    今回は、その「SyntaxHighlighter」に関する
    知らないと損する7つのカスタマイズについて書いていきます。




    1. <script> を使えば「<」を「&lt;」と書かずに済む

    <pre> タグを使ってコードを記述する際は
    文字実体参照(「<」を「&lt;」と書くなど)を使う必要がありましたが
    <script> タグと CDATAセクション を使う方法ならその必要はありません。

    下記のように書けば普通に「<」などを書いて構いません。
    <script> タグに「type="syntaxhighlighter"」と書くのを忘れずに!
    <script type="syntaxhighlighter" class="brush: html"><![CDATA[
    <div id="content">
    <p>sample text</p>
    </div>
    ]]></script>

    ただし、この場合もコード内に書けない文字列が2つだけあります。
    ]]>」「</script>」です。
    それぞれ、は「]]&gt;」「&lt;/script>」と書きましょう。

    また、この記述方法には
    JavaScript が無効だとコードが一切見えないという欠点もあります。
    <pre> タグと <script> タグのどちらを使うとよいかは
    何を優先するかで変わってきそうです。




    2. 自動リンクを無効にする

    コードの中に URL が含まれる場合
    SyntaxHighlighter はそれを自動でリンク化します。
    しかし、サンプルコードでは URL がダミーなこともあり
    リンク化して欲しくないことも多々あります。

    そんな時は、自動リンク化機能を無効にしましょう。
    下記のように、class に「auto-links: false」と書けばOKです。
    <pre class="brush: html; auto-links: false">
    <div id="content">
    <a href="http://example.com/">sample link</a>
    </div>
    </pre>




    3. 右上に出る「?」を非表示にする

    初期設定では、コードの右上に のようなツールバーが表示されますが
    不要であれば非表示にもできます。

    下記のように、class に「toolbar: false」と書くだけです。
    <pre class="brush: html; toolbar: false">
    <div id="content">
    <p>sample text</p>
    </div>
    </pre>




    4. 自動改行環境でも使えるようにする

    「FC2ブログ」などの自動改行が有効な環境では
    SyntaxHighlighter のコード表示が崩れる問題が発生します。

    この場合、JavaScript で下記のように記述すると
    自動改行が有効な環境でも正常に表示されます。
    <script>
    SyntaxHighlighter.config.bloggerMode = true;
    </script>




    5. 毎回使う設定はまとめて書くと手間いらず

    設定の中には毎回使いたいものもあると思います。

    その場合、「SyntaxHighlighter.all();」を記述したJavaScriptファイルに
    毎回使う設定を一緒に記述しておくと便利です。
    前回の記事の例であれば「shTrigger.js」に記述します)
    このJavaScriptファイルを呼び出すだけで
    SyntaxHighlighter の設定が自動で行われるようになりますよ。

    各設定の記述形式は、
    SyntaxHighlighter.defaults['設定名'] = 値;」です。
    例えば、自動リンク無効化(設定名:auto-links,値:false)であれば
    「SyntaxHighlighter.defaults['auto-links'] = false;」となります。
    SyntaxHighlighter.defaults['auto-links'] = false; //自動リンク無効
    SyntaxHighlighter.defaults['toolbar'] = false; //右上の?を非表示
    SyntaxHighlighter.defaults['gutter'] = false; //行番号を非表示
    SyntaxHighlighter.defaults['html-script'] = true; //他言語+HTML
    SyntaxHighlighter.defaults['tab-size'] = 3; //tabのスペースを指定
    SyntaxHighlighter.config.bloggerMode = true; //自動改行対策

    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();

    ここで紹介していないその他の設定については
    SyntaxHighlighter の公式ページ(英語)を参考にしてみて下さい。




    6. スクロールバーに関する問題

    SyntaxHighlighter を使うとき
    初期設定だとスクロールバーに関する2つの困った問題が出ます。

    1つ目は、常に縦方向のスクロールバーが表示される問題
    2つ目は、IE で横方向のスクロールバーが出ると最終行が隠れる問題です。

    この2つの問題を解決するには
    使用中のスタイルシート(CSS)を編集する必要があります。
    前回の記事の例であれば「shCoreDefault.css」を編集します)
    スタイルシート(CSS)の最終行に下記の内容を追記しましょう。
    .syntaxhighlighter {
    overflow-y: hidden !important; /*縦スクロールバー消去*/
    }

    .syntaxhighlighter.ie {
    font-size: 1em !important; /*IEフォントサイズ*/
    padding: 0 0 1.4em !important; /*IE横スクロールバー対策*/
    }

    IE の問題に関しては
    環境によって必要な余白が異なる場合があります。
    「padding」の値は適宜変更して下さい。




    7. デザイン(CSS)をカスタマイズ

    SyntaxHighlighter には
    デフォルトで8種類のデザイン(CSS)が用意されていますが
    自分でカスタマイズすることも可能。
    使用中のスタイルシート(CSS)の中身を書き換えればOKです。
    前回の記事の例であれば「shCoreDefault.css」を書き換えます)

    該当箇所のCSSを書き換えてもよいですが
    最後にまとめて追記で上書きした方が編集箇所が分かりやすく
    デザインに問題が出た時の修正,復元が簡単だと思います。

    例として、私が追記した内容を載せておきます。
    .syntaxhighlighter a,
    .syntaxhighlighter div,
    .syntaxhighlighter code,
    .syntaxhighlighter table,
    .syntaxhighlighter table td,
    .syntaxhighlighter table tr,
    .syntaxhighlighter table tbody,
    .syntaxhighlighter table thead,
    .syntaxhighlighter table caption,
    .syntaxhighlighter textarea {
    line-height: 1.3em !important;/*行間*/
    }

    .syntaxhighlighter {
    margin: 0 !important;
    border: solid 1px #92a3b5 !important; /*枠線*/
    overflow-y: hidden !important; /*縦スクロールバー消去*/
    }

    .syntaxhighlighter .line.alt1 {
    background-color: #FFFFFF !important; /*偶数行背景色*/
    }

    .syntaxhighlighter .line.alt2 {
    background-color: #F5F7FA !important; /*奇数行背景色*/
    }

    .syntaxhighlighter .gutter .line {
    border-right: solid 3px #D6D6D6 !important; /*行番号の境界線*/
    }

    .syntaxhighlighter .line.highlighted.alt1 {
    background-color: #FFDDDD !important; /*偶数行ハイライト背景色*/
    }

    .syntaxhighlighter .line.highlighted.alt2 {
    background-color: #FFDDDD !important; /*奇数行ハイライト背景色*/
    }

    .syntaxhighlighter .gutter .line.highlighted {
    border-color: #EEAAAA !important; /*ハイライトの境界線*/
    color: #DD6666 !important; /*ハイライト文字色*/
    }

    .syntaxhighlighter table caption {
    padding: 0.2em 0 0.2em 1em !important; /*タイトルの余白*/
    color: #FFF !important; /*タイトルの文字色*/
    background-color: #92a3b5 !important; /*タイトルの背景色*/
    }

    .syntaxhighlighter.nogutter td.code .container textarea,
    .syntaxhighlighter.nogutter td.code .line {
    padding: 0 1em !important; /*行番号なしの時の余白*/
    }

    .syntaxhighlighter.ie {
    font-size: 1em !important; /*IEフォントサイズ*/
    padding: 0 0 1.4em !important; /*IE横スクロールバー対策*/
    }



    【関連記事】

       → SyntaxHighlighter の導入方法
       → サイトに載せるバッチファイルのコードを自動で色分けする










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




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


    ためになりました
    名無し | 2014/12/11/Thu [EDIT]



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

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

    ブログパーツ