投稿

5月, 2018の投稿を表示しています

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 へ移行