Skip to main content

ハイパーリンク (Hyperlink)

表示​

コード​

  • [表示名](リンク) の順
md
- [Markdown-Table](02.markdown-table.md)
- [Google](http://www.google.com)
- [ページ内リンクの詳細](#ページ内リンクの詳細) ← 先頭に `#` つける。 `#` と間にスペースは入れない。飛びたい先が `##` だとしても、リンクは `#`

URLそのままでリンクにしたい場合

md
- http://www.google.com/  ← URLそのまま表示で良いケース
- <http://www.google.com/> ← これは Markdown 的にはありかも知れないが、Docusaurus ではエラーになる。

サイト内リンクの マイルール​

ルール​

このようなルールにしておくと、HTML レンダリング結果も、VSCode 操作上もストレスなし

  • パスは相対パスで指定
  • 拡張子は省略しない

実験結果メモ​

雑多だが、実験結果を残しておく

リンク関連 実験結果、動作確認用

02.markdown-table.md というファイルが同ディレクトリにあったとして、

#リンク先HTML上VSCode上
1markdown-tableox
2markdown-table.mdxx
302.markdown-table.mdoo
402.markdown-tablexo
  • 生成された HTML 上でリンクが有効になる
  • VSCode 上でもリンクが有効なもの

で選ぶと、3 の「オリジナルのファイル名」が良さそう。

ファイル名の先頭の数字は HTML 上は表示はされないが、拡張子を明示したなら指定が必要。

ディレクトリ名の先頭の数字は HTML 上は表示はされないが、指定は必要。
絶対パスが動作しないのは、

#リンク先HTML上VSCode上
1../01.introduction/01.create-new-project.mdoo
2../setup/create-new-project.mdxx
3/docs/04.memo/01.setup/create-new-project.mdxx
4/docs/memo/setup/create-new-project.mdxx
#リンク先HTML上VSCode上
1/path/to/sample-absoluteox
2path/to/sample-relative)ox
3sample-idox
  • 3つとも、run start は OKで、 run build はNG？

ページ内リンクの詳細​

Docusaurus で採用している GFM は、見出しの内容から自動で ID を生成する。スペースはハイフンに、大文字は小文字に変換される。

#内容Markdown上の見出しリンクに記載時
1H1, H2, .. の区別なく # は1個。先頭の空白もなし### 詳細#詳細
2空白 → ハイフン### 詳細 その2#詳細-その2
3大文字 → 小文字### 詳細 その3 IDについて#詳細-その3-idについて
4カスタムのアンカーIDをつけることもできる### 詳細 その4 とても長いタイトル {#long-title}#long-title
  • 1-3 が GFM ルール。4 は remark による拡張 (詳しくは知らないので、気になったらググる)
  • ちなみに VSCode では 1-3 は対応していて飛べる。 4 は飛べない。

詳細​

リンク飛び先サンプル1

詳細 その2​

リンク飛び先サンプル2

詳細 その3 IDについて​

リンク飛び先サンプル3

詳細 その4 とても長いタイトル​

リンク飛び先サンプル4

Last updated on