はてなブログでpreタグ内での自動リンクを回避する方法

最近、jQueryを勉強しています。今更です。

はてなブログでソースコードを記載する際は<pre>タグを使うことで、良い感じに表示してくれます。文中に記載する際は<code>タグを使っています。

今回はjQueryを読み込ませるため<script src="URL">を<pre>タグ内に記載しようとしたら、投稿時に自動キーワードリンクによりアンカータグが付与されてしまうという事象に悩まされました。

通常の自動キーワードリンクに対する回避方法は以下に掲載されています。

空の一重角カッコのペア「[] ～ []」で文字列を囲む事で、キーワードやはてな記法などによる自動リンクを指定した範囲のみ止めることができます。

特定の文字列にonclickなどを仕込みたいときなどに、はてなキーワードへのリンクが付与されてしまうと少し困ったりするのでたまに使います。

通常はこれで回避することができますが、<pre>タグ内で同様の回避方法を行使すると、投稿時にエスケープ処理されるはずの[]がそのまま出力されてしまいました。

困じ果てた末、はてなブログに問い合わせることにしました。

結論。

<pre>○○○</pre> ⇒ <pre data-unlink="">○○○</pre>

<pre>タグ内に「data-unlink」という属性を付与してみてください、とのことでした。

確かにこれで<pre>タグ内でもURLなどの自動キーワードリンク付与を回避することができました。

ただ、「data-unlink」という属性は見たことがなかったので少し調べてみました。

すると、回避する方法は以前からあったようです。

どうやら、ソースコード掲載に「SyntaxHighlighter」なるものを使用している人が多いらしく、調べる際にこちらを経由していれば辿りつけたかもしれません。

でも折角なので改めて記事にしました。ありがとうございました。