はじめに
GitHubでプルリクエスト（PR）を作成する際、例えば以下のような4つの見出しをMarkdownで記載することがあると思います。
# チケット# 背景# 対応内容# 動作確認結果
そして、これらの見出しのうち「# 動作確認結果」の部分へ直接アクセスできるアンカーリンク（URL）を取得して、外部ツール（Notionなど）に貼り付けて共有したい場合があります。
イメージ：
しかし、PR画面で「# 動作確認結果」という見出しにマウスカーソルを合わせても、通常は🔗マークが表示されず、アンカーリンクが簡単に取得できません。
また、Markdownで書いた見出しがHTMLに変換されても、その<h1>タグにid属性は付与されていないようです。
# 動作確認結果
↓ MarkdownからHTMLに変換後 ↓
<h1 dir="auto">動作確認結果</h1>
もしこれがQiita記事やリポジトリのREADME.mdであれば、見出しの左側に🔗マークが表示され、そのリンクをコピーして共有できます。
しかし、プルリクエスト画面では同様の挙動が行われません。
README.mdの場合のイメージ：
そこで、今回はPR上の見出しにもアンカーリンクを設ける方法をご紹介します。
カスタムアンカーを使う方法
GitHubのMarkdownでは、HTMLタグを直接埋め込むことができます。
これを利用し、<a>タグで任意のアンカーポイント設定するという方法があります。
具体的には、# 動作確認結果という見出しの直前に、id属性付きの<a>タグを挿入します。
例えば、以下のように記述します。
（id属性の値は、適当に"test"とします。）
<a id="test"></a>
# 動作確認結果
これで、
https://<PRのURL>#test
というリンクから、この<a>タグを置いた箇所へページ内リンクが可能になります。
ただし、実際にこのURLにアクセスすると、PRページの固定ヘッダーと見出しが重なり、見出し部分が隠れてしまいます。
- Before（
<br>を入れる前）
この問題は、<a>タグのあとに<br>などを入れて少し余白を確保することで解消できます。
<a id="test"></a>
<br>
# 動作確認結果
<br>を挿入すると、リンク先へ移動した際に余白ができ、見出しがヘッダーに隠れず綺麗に表示されるようになります。
- After（
<br>を入れた後）
実際のサンプル：
https://github.com/ngsw877/git_tutorial/pull/19#test
このように簡単なHTMLタグの挿入と余白調整で、プルリクエスト本文中の任意の箇所にアンカーリンクを作成し、その場所へ直接アクセスできるようになります。
参考
-
GitHub Docs カスタムアンカー
- ※ ドキュメント内では
<a name="my-custom-anchor-point"></a>のようにname属性を使用する例が紹介されていますが、HTML5でname属性は非推奨となったため当記事ではid属性を使用しています。（以下のリンク参照）
- ※ ドキュメント内では
- HTML < a >タグ - MDN