mdmark

図と表に番号を付ける

fig の印と、番号を出すリンクの書き方

本文から図や表を番号で参照したいときに実行する。

前提

• 文書を描く

手順

図と表に印を付ける

図の直前に印を書く

<!-- fig: arch -->

![全体の構成](./arch.png "全体の構成")

<!-- fig: ID --> を、図の直前に書く。 印の直後の、画像 1 つの段落に番号を付ける。 画像の title（"全体の構成"）が、番号の後ろに出る題になる。 図の題は画像の下に 図 1 の形で出る。

表の直前に印を書く

<!-- fig: list -->

| 名前 | 値 |
| --- | --- |
| りんご | 10 |

印の直後の表に番号を付ける。 表の題は表の上に 表 1 の形で出る。

本文から参照する

#fig-ID へのリンクを書く

[図](#fig-arch) の構成を [表](#fig-list) にまとめる。

リンク先は #fig- に印の ID を続ける。 リンクの文字が、その図表の 図 1・表 1 に替わる。 番号は文書の頭から、図と表で別に数える。

誤りを直す

参照が切れたとき

リンク先の ID の図表が無いと、リンクの文字は書いたままになり、書き方の警告が出る。 <!-- fig: ID --> を図か表の直前に書くか、リンク先を直す。

ID が重なったとき

同じ ID の印を 2 回書くと、2 つ目の図表には番号だけが付いて ID が付かず、書き方の警告が出る。 別の ID に直す。

反映

即時。mount と update で描くたびに、そのとき描く文書の印で決め直す。

確認

番号が付いている

[...document.querySelectorAll(".mdmark .mdmark-figure-caption")].map((c) => c.textContent)

文書の頭から順に、図 1全体の構成 や 表 1 のように、番号と題が出る。

リンクの文字が番号になっている

document.querySelector('.mdmark a[href="#fig-arch"]').textContent

図 1 が出る。 リンクを押すと、URL の末尾が #fig-arch になり、その図が画面に入る。

印が本文に出ていない

文書に印の文字が出ていない。

元に戻す

印とリンクを消す。 番号を付ける機能を止めるときは、機能をオン・オフする で figures をオフにする。 オフにすると、印を取り除き、リンクの文字は書いたままにする。