Skip to content

組み込み機能#

View Markdown

Ox Content は、よく使うドキュメントの挙動を既定で載せ、非標準の Markdown や HTML 拡張はオプトインにします。

下の既定は @ox-content/vite-plugin と一致します。速い静的ベースライン向けです。パース、静的埋め込み、ソース docs、検索インデックスは変換時またはビルド時に走り、追加構文と実行時挙動は明示的にオンにします。

false または省略はオフ、true は既定でオン、オブジェクトはオンにしたうえで指定したフィールドだけ上書きします。

このドキュメントサイト自体が Ox Content でできています。下の機能ガイドは説明するだけでなく、機能をオンにして 実例をインラインで描画します。日本語ガイドは英語と同じ情報を載せます。

機能ガイド#

ガイド 内容
Markdown の土台 GFM、表、タスクリスト、脚注、autolink、frontmatter、TOC
コンポーネントマトリクス 執筆 API、生成 HTML、アクセシビリティ、テーマフック、no/low-JS の挙動
見出しパーマリンク 生成済み見出し id を再利用するオプトインの可視 # リンク
構文拡張 絵文字ショートコード、Wiki リンク、属性構文、CJK 強調
相互参照 セクション、図、表への label 付きリンク
引用 CSL JSON に基づく引用と生成 bibliography entry
BudouX 日本語改行向けのビルド時フレーズ分割
カスタムコンテナ オプトインの ::: tip / ::: details
条件付きブロック オプトインの静的な ::: if / ::: else 分岐
カード オプトインの ::: card / ::: link-card / ::: card-grid
手順リスト オプトインの ::: steps
ファイル取り込み オプトインの <!-- @include -->
Markdown パーシャル オプトインのパラメータ付き <!-- @partial -->
ファイルツリー オプトインの静的ディレクトリ図
データテーブル オプトインの csv-table / json-table 静的テーブル
インラインバッジ オプトインの {badge:tip}
NotByAI バッジ オプトインの静的な人の執筆開示(<NotByAI />
キーボードキー オプトインの {kbd:Ctrl+K} セマンティックなショートカット
略語・用語集 オプトインの *[TERM]: をアクセス可能な <abbr> へ展開
定義リスト オプトインの Term / : definition 用語リスト
マジックリンク オプトインの {link:@user} / エイリアス / label|url リッチリンク
画像 図、キャプション、遅延読み込み、安全な寸法
ページリソース ページバンドル資産とリサイズ・クロップ・形式変換
コードブロック ハイライト、注釈、ソース取り込み
コードグループ オプトインの VitePress 風 ::: code-group フェンスタブ
埋め込み GitHub / OG カード、パッケージマネージャタブ、YouTube、SNS
Mermaid フェンスを静的 SVG に描画
Graphviz DOT DOT graph フェンスをサニタイズ済み静的 SVG に描画
数式 オプトインの $…$ / $$…$$。任意依存の KaTeX で組版
検索 静的 BM25 インデックスとクライアント API
コレクション Markdown を SQL 風ビルダで問い合わせ
品質チェック lint、型チェック、docs テスト、HTML サニタイズ
型ホバー twoslash フェンスのビルド時 TypeScript 型オーバーレイ
サイト生成 SSG、OG 画像、編集リンク、API ドキュメント
独自ホスト lifecycle 独自 HTML ホスト向けの Vite loading、dev routing、invalidation、書き出し
Document assets script、style、link、manifest、self-hosted asset の typed tag
SSG 出力プリミティブ ssg: false 向けのリソース、併記、フィード、sitemap、lastmod
コンポーネント CSS ssg: falsetransformAllPlugins() 向けの公式 CSS
ページ head ビルド時の Unhead 互換 title / meta / link / JSON-LD API
SEO その API 上の canonical、robots、hreflang、検証
前へ / 次へ サイドバー順の前後リンク
パンくず ルートからサイドバー祖先までの道筋
JSON-LD オプトインの TechArticle / WebSite / BreadcrumbList
リーダー chrome コピー、外部リンクアイコン、先頭へ戻る
ロケールスイッチャー 設定したロケールへのヘッダー導線
アクセシビリティ スキップリンクと印刷スタイル
ヘッダー chrome ナビ、告知バー、ページ単位の chrome
Sitemap / robots / llms.txt クロール用マニフェスト
Markdown ソースの併記 生成 HTML の横に元の Markdown をオプトインで書き出す
下書き / 非公開 / 予約公開 frontmatter の公開状態
パーマリンクと Cascade 独自 URL とディレクトリ既定 frontmatter
リダイレクトとエイリアス 静的 HTML リダイレクト
カスタム 404 テーマ付き 404
RSS / Atom / JSON フィード コレクションからフィードを出力
ブログ ページ送り索引、著者、タグ、アーカイブ、任意の外部フィード
PWA マニフェストとサービスワーカー Web アプリマニフェストと保守的なオフラインキャッシュ(クライアント JS を追加)
セルフホスト Iconify CSS 使った Iconify アイコンのオプトイン CSS マスク(api.iconify.design なし)
タクソノミー タグ / カテゴリの用語ページと関連ページ
ドキュメントのバージョン管理 プレフィックス、凍結スナップショット、切替 UI
チーム / メンバー layout: team の静的カード
Git コントリビューター 各記事の下に一意の git 作者を出すオプトイン
セクション索引ページ index.md がないディレクトリ向けの生成一覧

既定とオプトイン#

領域 オプション 既定 ガイド
Markdown 土台 gfm, footnotes, tables, taskLists, strikethrough, autolinks true Markdown の土台
意味的な脚注 semanticFootnotes false Markdown の土台
ページメタ frontmatter true Markdown の土台
ナビゲーション toc, tocMaxDepth true, 3 Markdown の土台
見出しリンク headingPermalinks / theme.headingPermalink false, "hover" 見出しパーマリンク
静的サイト ssg { enabled } サイト生成
独自 HTML ホスト oxContentCustomHost 公開 API 独自ホスト lifecycle
Document assets renderDocumentAssets 公開 API Document assets
独自ホストの SSG 出力 planSsgOutputswriteResourceFileswriteMarkdownCompanionsrenderFeedFileswriteFeedFileswriteSiteMapFiles 公開 API SSG 出力プリミティブ
API ドキュメント docs { enabled } サイト生成
検索 search { enabled } 検索
コレクション collections content コレクション
静的埋め込み embeds.github, embeds.openGraph true 埋め込み
オプトイン埋め込み embeds.pm, embeds.twitter, embeds.reddit, embeds.bluesky, embeds.qiita, embeds.zenn, embeds.packageRegistry, embeds.spotify, embeds.appleMusic, embeds.speakerDeck, embeds.audio, embeds.video, embeds.stackBlitz, embeds.webContainer false 埋め込み
構文ハイライト highlight false コードブロック
コード執筆 codeAnnotations, codeImports false コードブロック
コードグループ codeGroups false コードグループ
条件付きブロック conditionalBlocks false 条件付きブロック
追加構文 wikiLinks, emojiShortcodes, attrs, crossReferences / xrefs, citations, budoux, cjkEmphasis, containers, badges, notByAi, keyboardKeys, abbreviations, definitionLists, magicLinks false 構文拡張
ファイル取り込み includes false ファイル取り込み
Markdown パーシャル partials false Markdown パーシャル
カード cards false カード
手順リスト steps false 手順リスト
ファイルツリー fileTree false ファイルツリー
データテーブル dataTables false データテーブル
画像 images false 画像
ページリソース resources false ページリソース
mermaid, graphviz false Mermaid, Graphviz DOT
数式 math false 数式
OG 画像 ogImage false サイト生成
HTML 安全 sanitize false 品質チェック
編集リンク editThisPage false サイト生成
ページ送り ssg.pagination false 前へ / 次へ
パンくず ssg.breadcrumbs / theme.breadcrumbs false パンくず
ページ head renderHead ビルド時 ページ head
SEO タグ ssg.siteUrl、frontmatter robots / canonical 設定時のみ SEO
head 検証 ssg.headValidation false SEO
構造化データ ssg.jsonLd false JSON-LD
リーダー chrome ssg.readerChrome false リーダー chrome
Theme bootstrap renderThemeBootstrapScript 公開 API テーマ
ロケールスイッチャー ssg.localeSwitcher false ロケールスイッチャー
アクセシビリティ ssg.a11y false アクセシビリティ
ヘッダー chrome theme.nav, theme.announcement, ssg.pageChrome オフ ヘッダー chrome
クロール siteMaps false Sitemap / robots / llms.txt
Markdown ソース ssg.markdownSource false Markdown ソースの併記
公開状態 publishState false 下書き / 非公開 / 予約公開
パーマリンク permalinks false パーマリンクと Cascade
frontmatter 継承 cascade false パーマリンクと Cascade
リダイレクト redirects false リダイレクトとエイリアス
カスタム 404 ssg.notFound false カスタム 404
フィード feeds false RSS / Atom / JSON フィード
ブログ blog / ssg.blog false ブログ
PWA pwa false PWA マニフェストとサービスワーカー
セルフホストアイコン icons false セルフホスト Iconify CSS
ドキュメント版 versions false ドキュメントのバージョン管理
タクソノミー taxonomies false タクソノミー
チームページ ssg.team false チーム / メンバー
Git 作者 ssg.contributors false Git コントリビューター
セクション索引 ssg.sectionIndex false セクション索引ページ
コード検査 codeBlockLint, codeBlockTypecheck, docsTests false 品質チェック
型ホバー typedHover false 型ホバー
独自パイプライン transformers [] サイト生成

タブと YouTube 埋め込みにオプションはありません。SSG と dev preview では常に処理されます。埋め込み を見てください。

設定例#

import { defineConfig } from "vite-plus";
import { oxContent } from "@ox-content/vite-plugin";

export default defineConfig({
  plugins: [
    oxContent({
      highlight: true,
      emojiShortcodes: true,
      codeAnnotations: {
        notation: "both",
      },
      embeds: {
        pm: { sync: true },
        twitter: { fetch: true },
        bluesky: true,
      },
    }),
  ],
});

どのオプションも同じ約束です。false は機能を切り、true は既定でオン、オブジェクトはオンにしたうえで指定したフィールドだけ上書きします。

コピーできる執筆例はリポジトリの examples/builtin-features/content/ にあります。事例 のページは、いくつかの機能を実行可能なプロジェクトで見せます。

Last updated: