データテーブル#
csv-table と json-table フェンスはオプトインです。有効にすると、それらの
フェンスが静的 HTML の表になります。セルのテキストはエスケープされます。
クライアント JavaScript は不要です。無効時は普通のコードブロックのままです。
| オプション | 型 | 既定 |
|---|---|---|
dataTables |
boolean / DataTableOptions |
false |
dataTables.rootDir |
string |
プロジェクト |
dataTables.missing |
"error" / "warn" |
"error" |
import { oxContent } from "@ox-content/vite-plugin";
export default {
plugins: [
oxContent({
dataTables: true,
}),
],
};
書き方#
このサイトは dataTables をオンにしているので、次のブロックはライブの表です。
| Option | Type | Default |
|---|---|---|
| highlight | boolean | false |
```csv-table title="Options"
Option,Type,Default
highlight,boolean,false
```
- フェンス言語は
csv-tableとjson-tableです。 - CSV の先頭行が見出しです。引用符で囲んだフィールドにはカンマを含められます。
- JSON はオブジェクトの配列、配列の配列、または
{ "headers": [...], "rows": [[...]] }です。 title="..."は<caption>になります。- 他のフェンスの中、インデントコード、インラインコードは変換しません。
ファイルを取り込む#
インラインが動いたら、フェンスからファイルを読めます。@/ と / は
rootDir（未指定なら Vite のプロジェクトルート）から解決します。相対パスは
今の Markdown ファイルから解決します。.. でそのルートから外には出られません。
```csv-table src="@/content/data/options.csv" title="From CSV"
```
| Option | Type | Default |
|---|---|---|
| highlight | boolean | false |
| lineNumbers | boolean | true |
フェンス本体がパス 1 行だけのときも取り込みです。
```json-table
./options.json
```
./options.json
欠けたファイルは missing に従います。既定は "error"（変換診断として報告）
です。"warn" はフェンスをコードブロックのまま残し、エラーにはしません。
壊れた CSV/JSON は常に対処できる診断を出します。
oxContent({
dataTables: {
rootDir: "docs",
missing: "warn",
},
});