More than 1 year has passed since last update.

URL を自動リンクさせずに表示させたい

Last updated at 2023-01-26Posted at 2022-11-20

例えば、以下のような URL をそのままにすると、自動的にリンクが作成される。これは、< ~ > を省略する拡張となっている。

https://www.example.com

Qiita では、このような生のリンクをリンクカードとして表示させている。

本記事では、これらの自動リンクを無効化して、そのまま文字列が表示する方法を考えたい。

ちなみに、行内コードやコードブロックを利用すれば、もっとも簡単に文字列のみ表示させることが出来る。しかし、背景色が変わってしまったり、本文中に挿入できない。今回はこれを求めているわけではない。（どこに利用価値があるのかと問われると、あっ…）

■ GFM による仕様

生のリンクを自動的にリンクとして認識させる仕様は GFM に記載されている。

この仕様を確認すると、URI スキームから始まるフルの URL (1.)、www から始まる URI スキームが省略されている URL (2.)、電子メール (3.) の 3 種類が自動的にリンクとして解釈される。

1. https://www.example.com
1. www.example.com
1. example@email.com

フルの URL と www から始まる省略された URL は、ともに www が解析に関して重要な部分になるようだ。そのため、www を強調させるとリンクとして機能しなくなる。

- https://*www*.example.com
- *www*.example.com

この場合、www だけが斜体になってしまい、自動リンクは回避しているもののそのまま表示させているとは言えない。

ダミーの HTML タグを使って回避させることが出来る。この場合では、斜体など文字に装飾が加わらない。

- https://<foo>www</foo>.example.com
- <foo>www</foo>.example.com

ただし、HTML タグが許されている場合に限られることには注意が必要になる。（e.g. Dellinger.io では HTML タグが使えない）

電子メールの場合も同様に、強調や HTML タグを利用すると自動リンクを回避することが出来る。

- *example*@email.com
- <foo>example</foo>@email.com

ただし、電子メールであれば、@ を AT や -at- と表記しておいて、読み手に @ へ修正させる方法が主流なような気もする。

CommonMark に準拠する場合、HTML ブロック内の Markdown はリテラルに解釈される。そのため、<p></p> や <div></div> などの HTML タグで HTML ブロック内に URL や電子メールを含めれば良い。

- <div> https://www.example.com </div>
- <div> www.example.com </div>
- <div> example@email.com </div>

ただし、この方法では一部の Markdown 記法内の URL や電子メールの自動リンクを回避することが出来ない。また、HTML ブロックの仕様をある程度理解している必要がある。

パーサによって結果に差が生じる方法。

HTML エンティティを利用して行頭にゼロ幅スペースを挿入することで自動リンクを回避することも出来る。

- &#8203;https://www.example.com
- &#8203;www.example.com
- &#8203;example@email.com

ただし、コピーするとゼロ幅スペースも意図せず含まれる場合があるため、少し注意が必要になる。

特定の文字をエスケープすると自動リンクを回避することが出来る。以下のように、: や www の後ろの . をエスケープする。

- https\://www.example.com
- www\.example.com

電子メールの場合は、どの文字をエスケープしても上手くいかないようだ。

強調を利用して自動リンクを回避する場合、一部だけが強調され不自然になる。これを少しでも綺麗にするには、全体を強調すれば良い。

- *https://*www*.example.com*
- **www*.example.com*
- **example*@email.com*

また、ダミーの HTML タグを利用している場合、<samp> タグで全体を覆うと等幅フォントになる。

- <samp>https://<foo>www</foo>.example.com</samp>
- <samp><foo>www</foo>.example.com</samp>
- <samp><foo>example</foo>@email.com</samp>

この記事を読んで「役に立った！」と感じる人はどれくらいいるのだろう

2023/01/26: CommonMark によるリンクの回避方法を追記