読者です 読者をやめる 読者になる 読者になる

銀の弾丸

プログラミングに関して、いろいろ書き残していければと思っております。

はてなブログにコードを貼るにはSyntaxHighlighterじゃなくてGistを使う

はてなブログ

はてなブログの、キーワードリンク(コンテンツ内の特定キーワードが勝手にリンクされる)は、PREの中身にも適用されるので、SyntaxHighlighter(プログラムコードなどを書式化してキレイに貼り付けるツール)と相性が悪い。

コードがリンクされるだけなら問題ないのですが、リンクのAタグがそのまま表示されて酷いことになります。 (追記: この問題は <pre data-unlink=""> で回避できるらしいです)

お金がないならGistを貼れ

プロ版だとこの機能をOFFに出来るらしいので問題ないみたいですが、先日はじめたばかりで、2年契約で、月600円はちょっとまだ気持ち的にも財布的にもムリ。

なので、貧乏人はSyntaxHighlighterをあきらめて GitHub Gistで貼りましょう。キレイに貼れますし、中身がリンクされることもないようです。

プロ版、無料版関係なく、はてなブログ的には「コード貼るならGistでしょ」ということなんでしょうね。編集サイドバーにも「Gist貼り付け」のメニューがあるし。

これに気付くまで約5時間かかりましたよ。

5時間の死闘w

HEAD内SCRIPTでjQuery待ちして$('PRE A')$('CODE A')を削除してみたり、CODEの中身を書き換えてみたり、果敢にチャレンジしていたのですが、ことごとく玉砕しました。
キチンと設計すれば行けそうな気もしたのですが、変換されるタイミングが微妙だし、リンクが貼られるキーワードも不定なので、やってられない。

定年後に再チャレンジするかもしれない。

トレードオフは世の定め

個人的には、見た目の好みからSyntaxHighliterなのですよ。複数ファイルのGistではファイルの並び順が制御できないし、その辺の自由度という面でも。

ただ、GistだとSyntaxHighliterみたいに、<&lt; に変換しなくて良いから、そこらへんでトレードオフかな?

動かないコードを貼ってしまうリスクも少ないかと。


追記:はてなブログでのSyntaxHighlighterのキーワードリンク回避方法

無料版でも、<pre data-unlink=""> でSyntaxHighlighterのキーワードリンクを回避できるらしいですね。先日何で見つけられなかったのだろう。また試してみます。