注意書き・タブ・ステップ・ファイルツリー・バッジ・コードブロックの飾り・目次・節の開閉・行の詳細を書く手順
文書に注意書き・タブ・手順・ファイルツリー・バッジ・目次を入れるとき、コードブロックに題・行番号・行の強調を付けるとき、コードブロックを言語に応じて色分けさせるとき、節を閉じた状態で始めるとき、表の行に詳細を付けるときに実行する。
> [!WARNING]
> 守らないと壊れる内容を書く。
種類は NOTE・TIP・IMPORTANT・WARNING・CAUTION で、題はそれぞれ補足・ヒント・重要・警告・注意になる。
知らない種類は NOTE として出る。
> [!WARNING]-
> 閉じた状態で始める内容を書く。
種類の末尾に - を付ける。
題だけが出て、押すと開く。
<!-- tabs -->
### macOS
macOS の手順。
### Windows
Windows の手順。
<!-- /tabs -->
範囲の中で最初に出る見出しの階層で区切り、見出しの文字がタブ名になる。 タブ名にした見出しは、本文の見出しとして残らない。 見出しの無い範囲は、タブにせず中身をそのまま描き、書き方の警告が出る。
<!-- tabs: group=os -->
### macOS
macOS で入れる。
### Windows
Windows で入れる。
<!-- /tabs -->
<!-- tabs: group=os -->
### macOS
macOS で起動する。
### Windows
Windows で起動する。
<!-- /tabs -->
印に group= と組の名前を書く。
同じページで同じ組のタブ群は、読む人がどれかのタブを選ぶと、同じタブ名のタブへ揃って切り替わる。
読む人が選んだタブ名はブラウザに残り、ページを開き直しても、そのタブで開く。
組を付けないタブ群は、ほかと揃わず、選んだタブも覚えない。
値の無い group= は組を付けないものとして描き、書き方の警告が出る。
<!-- steps -->
1. 依存を入れる。
2. ビルドする。
<!-- /steps -->
範囲の最初の番号付きリストが手順になる。 項目の中の入れ子の番号付きリストは手順にならない。 番号付きリストの無い範囲は、中身をそのまま描き、書き方の警告が出る。
tree のコードブロックに罫線で書く```tree
mdmark/
├── src/
│ └── index.ts
└── package.json
```
フォルダは名前の末尾を / にする。
上の行より 2 段以上深い行があると読めず、コードブロックのまま描き、書き方の警告が出る。
罫線の段を 1 段ずつ深くして直す。
badge と : を続けるこの版は `badge:v0.1.0` です。
頭を外した文言が札になる。
頭を打ち消して見せるときは、: の前に \ を入れる。
<!-- code: title=app.ts lines highlight=2,4-6 -->
```ts
import { mount } from "mdmark";
const doc = await fetch("/README.md");
mount(document.querySelector("#doc"), await doc.text());
```
title= が題、lines が行番号、highlight= が強調する行になる。
使う引数だけを書く。
引数は空白で区切るため、題に空白は書けない。
強調する行は 2・4-6 のように、行の番号と範囲をコンマで並べる。
コードブロックの行の数を超える番号と、読めない指定は当てずに、書き方の警告が出る。
印の直後にコードブロックが無いときも、書き方の警告が出る。
```ts
let count = 0; // [\!code --]
let count = 1; // [\!code ++]
count += 1; // 数える [\!code highlight]
```
行末の行コメントに [!code ++]（足した行）・[!code --]（消した行）・[!code highlight]（強調）を書く。
行が色と行頭の +・- で分かれ、印は画面に出ない。
行コメントが印だけのときは、行コメントの頭（// など）も出ない。
知らない印（[!code focus] など）はその行に当てずに、書いた文字のまま出て、書き方の警告が出る。
印そのものを見せるときは、[ の後ろに \ を入れて打ち消す。
打ち消した印は、\ を外した文字のまま出る。
言語 tree のコードブロック・図の部品の定義のコードブロック・<!-- html --> の範囲のコードブロックには、題・行番号・行の強調も行末の印も当たらない。
```yaml
name: mdmark # 名前
version: 1
```
コードブロックの開きの後ろに言語を書くと、キーワード・文字列・数値・型・名前・コメントが色分けされる。
印は要らない。
色分けする言語は typescript（ts・tsx）・javascript（js・jsx・mjs・cjs）・json・yaml（yml）・python（py）・bash（sh・shell・zsh）・html（xml）・css・markdown（md）・sql。
括弧の中の別名も同じ言語として扱い、大文字と小文字は区別しない。
一覧は コードブロックの飾り。
言語の無いコードブロックと、一覧に無い言語（text など）のコードブロックは、色分けしない。
題・行番号・行の強調・コードの行の印を付けたコードブロックも、行ごとの分け方と行番号・行頭の +・- を保ったまま、行の中身が色分けされる。
色分けのライブラリは、色分けする言語のコードブロックがある文書でだけ読み込む。
読み込めないときは、コードを欠けさせずに色分けなしで出す。
色分けを止めるときは、設定の features.syntax か文書の <!-- features: -syntax --> でオフにする（機能をオン・オフする）。
読み込み先は設定の syntax.url で変える（設定）。
言語 tree のコードブロック・図の部品の定義のコードブロック・<!-- html --> の範囲のコードブロックと、文書に書いた生の HTML の pre・code は、色分けしない。
<!-- toc -->
目次を出したい場所に書く。 h2〜h3 の見出しが入れ子で並び、各項目はその見出しへのリンクになる。
## 補足
<!-- section: closed -->
補足の本文。
closed で閉じた状態、open で開いた状態で始める。
印を書かない節は開いた状態で始める。
開閉できるのは h2〜h4 の節。
closed・open 以外の値を書くと、開いた状態で描き、書き方の警告が出る。
| 名前 | 値 |
| --- | --- |
| りんご | 10 |
| みかん | 2 |
<!-- row-detail: 2 -->
みかんの詳細。
<!-- /row-detail -->
行の位置は、見出し行を除いて 1 から数える。 表の行より大きい位置を書くと、詳細を表の後の本文として描き、書き方の警告が出る。
即時。mount と update で描くたびに、そのとき描く文書の印で決め直す。
document.querySelector(".mdmark .markdown-alert-title").textContent
警告 など、書いた種類の題が出る。
閉じた注意書きは題だけが見え、押すと本文が出る。
document.querySelector('.mdmark [role="tab"][aria-selected="true"]').textContent
最初のタブの名前が出る。
別のタブを押すか、フォーカスのあるタブで左右の矢印キーを押すと、そのタブの aria-selected が true になり、中身が切り替わる。
localStorage.getItem("mdmark-tabs:os")
組のタブを押すと、同じ組で同じタブ名を持つタブ群のタブも選ばれる。 押したタブ名が、組の名前を付けたキーに残る。 ページを開き直すと、そのタブ名のタブが選ばれている。 localStorage が使えないブラウザでは、残さず・読まずに、揃える動きと切り替えだけが働く。
[".mdmark-steps", ".mdmark-tree", ".mdmark-badge"].map((s) => document.querySelector(`.mdmark ${s}`) !== null)
書いた記法の分だけ true が出る。
document.querySelector(".mdmark .mdmark-code .mdmark-code-title").textContent
書いた題が出る。
コードブロックの各行の左に行番号が出て、強調した行・足した行・消した行が色で分かれている。
コードブロックの文字を全て選んで写すと、行番号と行頭の +・- が入らない。
document.querySelector(".mdmark pre code .hljs-keyword") !== null
言語を書いたコードブロックなら true が出る。
色分けは描いた後に付くため、色分けのライブラリを読み終えてから確かめる。
コードブロックの文字を全て選んで写すと、色分けの前と同じ文字が写る。
目次の項目を押すと、URL の末尾が # と見出しの ID になり、その見出しが画面に入る。
document.querySelector(".mdmark .mdmark-section-toggle").getAttribute("aria-expanded")
閉じた節の見出しのボタンは false が出る。
押すと true になり、中身が出る。
行の詳細は、詳細を持つ行の先頭のセルのボタンで開閉する。
文書に印の文字が出ていない。
印を消し、注意書き・ファイルツリー・バッジの書き方を引用・コードブロック・行内のコードに戻し、コードの行の印を外すと、普通の Markdown として描かれる。 記法ごとに止めるときは、機能をオン・オフする で機能をオフにする。