Astro インテグレーション
NEW@love-rox/tcy-astro
Astro 4+ 専用。Markdown / MDX パイプラインに rehype プラグインを自動登録し、`.astro` ファイル用の `<Tcy>` コンポーネントも同梱します。
インストール
ピア依存は astro >= 4 です。@love-rox/tcy-core と @love-rox/tcy-rehype は依存として自動的に引き込まれます。
bun
bun add @love-rox/tcy-astropnpm
pnpm add @love-rox/tcy-astronpm
npm i @love-rox/tcy-astroyarn
yarn add @love-rox/tcy-astro中身は2つ
tcy() インテグレーション
@love-rox/tcy-rehype を Astro の Markdown / MDX パイプラインに登録します。.md / .mdx の本文中の半角英数字 run が、ビルド時に自動的にラップされます。
<Tcy> コンポーネント
.astro ファイル内の slot を明示的にラップしたいときに使う Astro コンポーネント。Markdown を介さない直書きの本文に。
使い方
まず astro.config.mjs でインテグレーションを登録します。これだけで Markdown / MDX 本文には自動で縦中横が適用されます。
// astro.config.mjs
import { defineConfig } from "astro/config";
import tcy from "@love-rox/tcy-astro";
export default defineConfig({
integrations: [tcy()],
});オプションを渡す
rehype プラグインに渡すオプションをそのまま指定できます。
// astro.config.mjs
import { defineConfig } from "astro/config";
import tcy from "@love-rox/tcy-astro";
export default defineConfig({
integrations: [
tcy({
maxLength: 2,
excludeWords: ["URL", "API", "2026"],
}),
],
});.astro ファイル内で使う
Markdown を介さない直書きの本文には <Tcy> コンポーネントを使います。
---
import Tcy from "@love-rox/tcy-astro/Tcy.astro";
---
<p style="writing-mode: vertical-rl">
<Tcy>第1章 2026年4月、Webの縦書きは進化した。</Tcy>
</p>オプション
共通オプションは React / Vue / rehype と同じ意味で動きます。インテグレーション専用のオプションは1つだけです。
共通オプション + rehype 由来
| オプション | 型 | 既定値 | 説明 |
|---|---|---|---|
| target | 'alphanumeric' | 'alpha' | 'digit' | 'ascii' | RegExp | 'alphanumeric' | 縦中横対象として扱う文字種。alphanumeric は [0-9A-Za-z]、ascii は印字可能な ASCII 全般。任意の RegExp も指定可能。 |
| combine | boolean | true | 連続した対象文字を1つのスパンにまとめるか。false にすると1文字ずつ別々のスパンで包みます。 |
| include | string | string[] | undefined | target に含まれなくても対象として扱う追加の文字。 |
| exclude | string | string[] | undefined | 対象から外したい文字。include より優先されます。 |
| maxLength | number | undefined | 縦中横セグメントの最大文字数。これを超える長さの英数字 run はプレーンテキストに戻ります。たとえば maxLength: 2 にすると 2026 のような4桁年は寝かせ、1 や 19 の短い run のみを縦中横にできます。 |
| excludeWords | string[] | undefined | 縦中横にしたくない語を完全一致で指定（部分一致ではなくセグメント値全体のマッチ）。URL API のような固有の略号や、特定の年号だけを横倒しのまま残したいときに便利。 |
| tagName | string | 'span' | ラップに使用するタグ名。 |
| className | string | string[] | 'tcy' | ラップ要素に付与するクラス名（配列で複数指定可）。 |
| skipTags | string[] | ['code', 'pre', 'script', 'style'] | 走査をスキップするタグ。<code> <pre> などコード表示中のテキストはデフォルトで処理されません。 |
インテグレーション専用
| オプション | 型 | 既定値 | 説明 |
|---|---|---|---|
| markdown | boolean | true | Markdown / MDX パイプラインに rehype-tcy を登録するか。false にするとインテグレーションは何もしません（<Tcy> コンポーネントだけ使う構成にできます）。 |
挙動の注記
- Astro は SSG-first なので、両方のピースともビルド時に走ります。クライアントへのコスト増はありません。
<code>/<pre>/<script>/<style>内のテキストはデフォルトでスキップされます（skipTagsで変更可）。- 冪等です。同じ Markdown を何度ビルドしても、出力 HTML は変わりません。
<Tcy>コンポーネントは内部で同じtcy-rehypeを呼んでいるので、Markdown 本文と.astro直書きで挙動が揃います。
他のアダプタ
Astro を使っていない場合は、生の [rehype プラグイン](./rehype) を直接 unified パイプラインに組み込んでください。アプリ側でランタイムに包みたいなら [React](./react) / [Vue](./vue) 版があります。