-
スライド内 <style> は Vue scoped としてコンパイルされ、レイアウト内部の要素に
届かない: .two-cols-body のようなレイアウトコンポーネント内部のクラスは、
スライドの <style> からセレクタの specificity をいくら上げても当たらない
(スライドのコンテンツはレイアウトの子スロットであり、scoped の data 属性が付かないため)。
:global() でページ限定にして書く:
:global(.slidev-page-7 .two-cols-body) {
align-items: center;
}
ただし同じ調整を複数スライドでコピペし始めたら、テーマ側に prop を生やす
(例: two-cols の valign) のが正しい置き場所。
-
markdown formatter が frontmatter を破壊する: この環境の PostToolUse hook (rumdl fmt) は
スライド区切り --- と frontmatter の間に空行を挿入し、layout: xxx を ## layout: xxx に
誤変換する。ファイル先頭に <!-- rumdl-disable --> を置いてはいけない — Slidev の
headmatter パーサは 1 行目が --- でないと反応せず、addons: theme: が全て無視される。
代わりにプロジェクトルートに .rumdl.toml を置いて Slidev の md を除外する:
[global]
exclude = [
"packages/*/example.md",
"packages/*/slides.md",
]
-
headmatter と最初のスライド frontmatter を別ブロックにすると空スライドが混入する:
---
theme: ./
---
---
layout: cover
---
# 表紙
この構造だと Slidev は「空の 1 枚目 + cover の 2 枚目」と解釈する。headmatter と最初の
スライドの frontmatter は同じブロックにマージする:
---
theme: ./
layout: cover
---
# 表紙
-
**bold** は Vue コンポーネント内のインラインスロットでは markdown 解釈されない:
<FindyKeyValue label="..."> **太字** </FindyKeyValue> は literal **太字** として
表示される。HTML の <strong> を直接書くか、スロット内容の前後に空行を入れて
ブロックとして評価させる。
-
rumdl 除外を作った後は .rumdl.toml の場所に注意: hook は編集対象ファイルから見て
カレントディレクトリ順に config を探す。モノレポ root に置けば全パッケージに効くが、
グローバル ~/dotfiles/.rumdl.toml は上書きされない (上書きされてほしいなら
プロジェクト側で [global] exclude = [] を明示的に空にする)。
-
seoMeta.ogImage: auto は slidev build でも Playwright Chromium を要求する
(ビルド後に OGP 画像をレンダリングするため)。CI では
pnpm exec playwright install --with-deps chromium が必要。
ローカルでは playwright-core のバージョン違いで headless shell の revision が
合わないことがある → node node_modules/playwright-chromium/cli.js install chromium
のようにデッキが依存するパッケージの CLI でインストールする
-
public/ のアセットを fetch するコードは import.meta.env.BASE_URL を前置する。
/comments.json のようなルート絶対パスは GitHub Pages の base path 配下で 404 になる。
相対パス ./foo.json も現在スライドの URL 基準で解決され 2 枚目以降で壊れるので不可
-
pnpm 10+ の build scripts 承認: esbuild や playwright-chromium の postinstall が
ブロックされたら pnpm-workspace.yaml の allowBuilds: で許可する
(package.json の pnpm.onlyBuiltDependencies は pnpm 11 では読まれない)
-
コードフェンスの [タイトル] と {行ハイライト} は順序を間違えると無視される:
正しくは lang [title] {range}。lang {range} [title] のように逆にすると
@slidev/cli の RE_BLOCK_INFO 正規表現がタイトルをキャプチャせず、ファイル名タブが
描画されない (行ハイライトだけは効くので気付きにくい)。
```ts [app.ts] {2,3}
const hello = 'world'
-
headmatter に comark: true を追加しても ::code-group がテキストのまま出ることがある:
comark は markdown-it 拡張の初期化に関わる設定のため、Vite の HMR では反映されない。
dev サーバーを再起動するまで ::code-group ブロックがタブ UI にならず、
生のコロン区切りテキストとして表示され続ける (中の code fence 自体は正常に動くので
一見動いているように見えて紛らわしい)。
