2018年5月12日土曜日

SyntaxHighlighter の Blogger への導入

プログラミング系の記事を書く場合に、サンプルコードの表記に SyntaxHighlighter を使いたいなと思い、このほど導入したので、その際の注意点:

    <link href='https://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
    <script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js' type='text/javascript'/>
    <script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJava.js' type='text/javascript'/>
    <script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushXml.js' type='text/javascript'/>

    <script type='text/javascript'>
        SyntaxHighlighter.config.bloggerMode = true;
        SyntaxHighlighter.defaults['toolbar'] = false;
        SyntaxHighlighter.defaults['gutter'] = false;
        SyntaxHighlighter.defaults['smart-tabs'] = false;

        SyntaxHighlighter.all();
    </script>
</head>
  • テーマの 「HTML の編集」を使って JavaScript コードを追加することになるが、HTML を編集して「テーマを保存」すると、その都度、レイアウトのブログの投稿ガジェットの「投稿の間に広告を表示する」の設定が無効になってしまうので、再度有効化しておく手間が必要。
  • autoloader は上手く動かなかった。おそらく、自前サイト内での相対リンクでないと駄目で、blogspot から外部の http://alexgorbatchev.com/pub/sh/ への絶対アドレスを利用しようとしているからなのかもしれない(クロスサイトスクリプティング?)。
  • また、上の問題と関連しているのかもしれないが、autoloader を使わずに http://alexgorbatchev.com/pub/sh/current/ を指定してもまだ上手く動かず、このアドレスからリダイレクトされる先のhttps://agorbatchev.typepad.com/pub/sh/3_0_83/ を指定する必要があった。そこまでやって、やっと正常に機能するようになった。
  • Blogger 側で tab がスペースに置き換えられてしまうので、SyntaxHighlighter 側の smart-tabs、tab-size の設定は無意味。
  • PC 版表示ではあまり問題になりにくいが、モバイル版では行の折り返しが発生するので、行番号のレイアウトが狂ってしまう。行番号表示は諦めるの(gutter = false)が無難。