SyntaxHighlighter の Blogger への導入

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

  • テーマの 「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)が無難。
後日談

👉 SyntaxHighlighter から Prism へ移行

コメント

このブログの人気の投稿

EP-805A 廃インク吸収パッド交換

WZR-HP-AG300H with OpenWrt

この Apple ID は、App Store で使用されたことがありません