ココログフリーでSyntaxHighlighter 3.0.83を使う: tonopぶらり

2016.02.23

ココログフリーでSyntaxHighlighter 3.0.83を使う

これまで、ブログにソースコードを書くときにあまり見た目を気にしていなかったのですが、ココログフリーでもSyntaxHighlighterを使えるようですので、試してみました。

参考にした主なサイトは次のとおり。ありがとうございます。
SyntaxHighlighter
ココログでソースコードをかっこよく表示する: よしなしごと
 Blogger:SyntaxHighlighter(1)ブログにソースコードを綺麗に表示させる: P--Q及びこのシリーズ記事

１．SyntaxHighlighter 3.0.83をダウンロードします。
２．ダウンロードしたファイルを展開し、必要なファイルをココログにアップロードします。
［コントロールパネル］→［ファイル］でホーム配下にSH3StylesとSH3Scriptsというフォルダを作り、必要なファイルをアップロードします。（SH3SytlesとSH3Scriptsのフォルダ名は任意で良いようです）

SH3Styles配下
shCoreDefault.css（shCore.css + shThemeDefalt.cssと同等らしい）

SH3Scripts配下
shCore.js
shAutoloader.js
の２つが必須。後は適宜必要なファイルを追加。
Bundle Brushesをご参照下さい。

３．マイリストに次のコードを追加。
shAutoloader.jsを使うことで、必要なJavaScriptコードのみ読み込むことができます。そのため、このコードを本文より</body>の近くに追加します。
当サイトの場合、SNSボタンをマイリストに記述していますので（ココログフリーにSNSボタンを設置してみた）、SNSボタンの直前にコード追加しています。



<!--SyntaxHighlighter 3.0.83-->

<link href="/SH3Styles/shCoreDefault.css" rel="stylesheet" type="text/css" />

<script src="/SH3Scripts/shCore.js" type="text/javascript"></script>

<script src="/SH3Scripts/shAutoloader.js" type="text/javascript"></script>

<script src="/SH3Scripts/shBrushXml.js" type="text/javascript"></script>

<script type="text/javascript">

SyntaxHighlighter.config.stripBrs = true;

SyntaxHighlighter.defaults['auto-links'] = false;

SyntaxHighlighter.defaults['toolbar'] = false;

SyntaxHighlighter.config.bloggerMode = false;

SyntaxHighlighter.autoloader (

  "bash shell                 /SH3Scripts/shBrushBash.js",

  "cpp c                      /SH3Scripts/shBrushCpp.js",

  "css                        /SH3Scripts/shBrushCss.js",

  "java                       /SH3Scripts/shBrushJava.js",

  "js jscript javascript      /SH3Scripts/shBrushJScript.js",

  "perl pl                    /SH3Scripts/shBrushPerl.js",

  "php                        /SH3Scripts/shBrushPhp.js",

  "plain text                 /SH3Scripts/shBrushPlain.js",

  "ps powershell              /SH3Scripts/shBrushPowerShell.js",

  "py python                  /SH3Scripts/shBrushPython.js",

  "rails ror sh               /SH3Scripts/shBrushRuby.js",

  "sql                        /SH3Scripts/shBrushSql.js",

  "vb vbnet                   /SH3Scripts/shBrushVb.js"

);

SyntaxHighlighter.all();

</script>

SyntaxHighlighter.config.stripBrs = true; は、<br />を無視します。
SyntaxHighlighter.defaults['auto-links'] = false; は、自動リンクを無効にします。
SyntaxHighlighter.defaults['toolbar'] = false; は、ツールバーを無効にします。
SyntaxHighlighter.config.bloggerMode = false; は、Bloggerモードを無効にします。

例えば、



<pre class="brush: js">

    /**

     * SyntaxHighlighter

     */

    function foo()

    {

        if (counter <= 10)

            return;

        // it works!

    }

</pre>

と書くと、



    /**

     * SyntaxHighlighter

     */

    function foo()

    {

        if (counter <= 10)

            return;

        // it works!

    }

となりますが、



<pre class="brush: js; gutter: false">

    /**

     * SyntaxHighlighter

     */

    function foo()

    {

        if (counter <= 10)

            return;

        // it works!

    }

</pre>

と書くと、



    /**

     * SyntaxHighlighter

     */

    function foo()

    {

        if (counter <= 10)

            return;

        // it works!

    }

と、行番号がなくなります。

こんな風に、



<pre class="brush: js; first-line: 10; highlight: [12, 14]">

    /**

     * SyntaxHighlighter

     */

    function foo()

    {

        if (counter <= 10)

            return;

        // it works!

    }

</pre>

と書くと、



    /**

     * SyntaxHighlighter

     */

    function foo()

    {

        if (counter <= 10)

            return;

        // it works!

    }

のように、行番号が10から始まり、12行目と14行目がハイライトされます。
このように、ココログフリーでもコードをハイライト表示可能とすることができます。

最後に、上のマイリストに追記したコードのSyntaxHighlighter表現を実現するための記述は、次のとおり。



<pre class="brush: js; html-script: true">

<!--SyntaxHighlighter 3.0.83-->

<link href="/SH3Styles/shCoreDefault.css" rel="stylesheet" type="text/css" />

<script src="/SH3Scripts/shCore.js" type="text/javascript"></script>

<script src="/SH3Scripts/shAutoloader.js" type="text/javascript"></script>

<script src="/SH3Scripts/shBrushXml.js" type="text/javascript"></script>

<script type="text/javascript">

SyntaxHighlighter.config.stripBrs = true;

SyntaxHighlighter.defaults['auto-links'] = false;

SyntaxHighlighter.defaults['toolbar'] = false;

SyntaxHighlighter.config.bloggerMode = false;

SyntaxHighlighter.autoloader (

  "bash shell                 /SH3Scripts/shBrushBash.js",

  "cpp c                      /SH3Scripts/shBrushCpp.js",

  "css                        /SH3Scripts/shBrushCss.js",

  "java                       /SH3Scripts/shBrushJava.js",

  "js jscript javascript      /SH3Scripts/shBrushJScript.js",

  "perl pl                    /SH3Scripts/shBrushPerl.js",

  "php                        /SH3Scripts/shBrushPhp.js",

  "plain text                 /SH3Scripts/shBrushPlain.js",

  "ps powershell              /SH3Scripts/shBrushPowerShell.js",

  "py python                  /SH3Scripts/shBrushPython.js",

  "rails ror sh               /SH3Scripts/shBrushRuby.js",

  "sql                        /SH3Scripts/shBrushSql.js",

  "vb vbnet                   /SH3Scripts/shBrushVb.js"

);

SyntaxHighlighter.all();

</script>

</pre>