@riebeckite/plugin-marp 0.0.31 → 0.0.33

package/README.md

@@ -25,6 +25,18 @@ export default defineConfig({
 });
 ```
 
+## Live example
+
+~~~marp title="Intro deck"
+# First slide
+
+- a bullet
+
+---
+
+# Second slide
+~~~
+
 ## Obsidian vault compatibility
 
 The Obsidian plugins [Marp](https://github.com/jichoup/obsidian-marp-plugin) and [Marp Slides](https://github.com/samuele-cozzi/obsidian-marp-slides) treat the entire note as a Marp deck and never store `marp` code fences. In Obsidian, activation is plugin-level: opening the slide preview or exporting renders the whole file of the active note, and neither plugin reads a per-note marker. Riebeckite instead activates per document using the canonical `marp: true` frontmatter flag — the same signal Marp CLI and the VS Code extension use — so notes written for those plugins are detected as:
@@ -94,10 +106,18 @@ When several decks on one page use the same theme their generated CSS is identic
 
 ### Build-time rendering
 
-- Rendering uses `script: false`, so a deck never ships client JavaScript. SVG slide sizing is handled by `style.css`;
+- Rendering uses `script: false`, so Marp Core adds no client script of its own. SVG slide sizing is handled by `style.css`;
 - captions come from the code block `title`;
 - `data-marp-slides` carries the slide count and `data-marp` marks the deck.
 
+### Viewer
+
+A small client entry (`initMarpDecks`) turns decks with two or more slides into a one-slide-at-a-time viewer: previous/next buttons, a slide counter, and a fullscreen toggle. Arrow keys, Page Up/Page Down, Home, and End move between slides while the deck has focus. Without JavaScript every slide stays in the vertical stack.
+
+### Standalone slide pages
+
+Every published whole-document Marp note also gets a deck-only page at `/slides` followed by its permalink. A note published at `/notes/talk/` is available at `/slides/notes/talk/`. The page renders the same deck without the Marp source fallback, and the note's normal page is unchanged. Inline `marp` fences keep their permalink only.
+
 ## Options
 
 | Option | Default | Description |
@@ -113,15 +133,16 @@ An unknown theme falls back to the default theme and emits a diagnostic with `so
 
 ## Limitations
 
-- No client-side slide editing or paging UI; this only produces static HTML/CSS at build time.
+- No client-side slide editing. Paging is limited to the built-in viewer, which needs JavaScript; without it the deck renders as a vertical stack of slides.
 - Only themes registered in Marp Core are available; loading arbitrary theme CSS is not supported.
 - `inlineSVG: false` emits bare `<section>` elements without the SVG wrapper, and the generated CSS changes to match that structure.
 - Whole-document decks bypass the normal Markdown pipeline, so Obsidian `![image](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/image.md)` image embeds are not resolved inside slides. Use regular Markdown image syntax with paths that exist on the published site, mirroring how Marp Slides itself does not support wiki links.
 
 ## Exports
 
-- `marp(options?)` / `marpPlugin(options?)` — plugin factory
+- `marp(options?)` / `marp(options?)` — plugin factory
 - `isMarpDocument(matter?)` — frontmatter `marp: true` detection helper
+- `initMarpDecks()` — viewer initializer, exported from `@riebeckite/plugin-marp/client`
 - Types: `MarpOptions`, `MarpDeck`, `MarpBuildRenderResult`
 
 ## See also

package/README_ja.md

@@ -6,7 +6,7 @@ Marp のスライドデッキをビルド時に描画するプラグインです
 
 [English](./README.md)
 
-## 設定する
+## 使い方
 
 ```ts
 import { defineConfig } from "@riebeckite/core";
@@ -25,9 +25,21 @@ export default defineConfig({
 });
 ```
 
+## 実行例
+
+~~~marp title="Intro deck"
+# First slide
+
+- a bullet
+
+---
+
+# Second slide
+~~~
+
 ## Obsidian Vault との互換性
 
-Obsidian プラグインの [Marp](https://github.com/jichoup/obsidian-marp-plugin) と [Marp Slides](https://github.com/samuele-cozzi/obsidian-marp-slides) はノート全体を Marp デッキとして扱い、`marp` コードフェンスを保存しません。Obsidian 側のアクティベーションはプラグイン単位です。スライドプレビューを開いたり、エクスポートしたりすると、アクティブなノートのファイル全体をデッキとして描画し、ノート単位のマーカーは読みません。Riebeckite では代わりに、文書単位で Marp CLI や VS Code 拡張と同じ canonical なフラグ（frontmatter の `marp: true`）によってデッキ化します。これらのプラグインで書いたノートは次のように検出されます。
+Obsidian プラグインの [Marp](https://github.com/jichoup/obsidian-marp-plugin) と [Marp Slides](https://github.com/samuele-cozzi/obsidian-marp-slides) はノート全体を Marp デッキとして扱い、`marp` コードフェンスを保存しません。Obsidian ではプラグイン単位で有効になります。スライドプレビューを開いたり、エクスポートしたりすると、アクティブなノートのファイル全体をデッキとして描画し、ノート単位のマーカーは読みません。Riebeckite では代わりに、Marp CLI や VS Code 拡張と同じ標準的なフラグ（frontmatter の `marp: true`）を使い、文書単位でデッキとして描画します。これらのプラグインで書いたノートは次のように検出されます。
 
 ````markdown
 ---
@@ -43,9 +55,9 @@ paginate: true
 # 2 枚目のスライド
 ````
 
-文書全体（directive として `theme` や `paginate` を効かせるため frontmatter を含む）を、ページ本文を置き換える 1 つの `<figure class="rb-marp">` デッキとして描画します。スライドの区切りは Marp と同じく `---` / `===` です。フラグも `marp` コードブロックもないノートは変更しません。
+文書全体（ディレクティブとして `theme` や `paginate` を効かせるため frontmatter を含む）を、ページ本文を置き換える 1 つの `<figure class="rb-marp">` デッキとして描画します。スライドの区切りは Marp と同じく `---` / `===` です。フラグも `marp` コードブロックもないノートは変更しません。
 
-> **アクティベーションの条件.** Riebeckite は Obsidian プラグインと同じ方法ではアクティベートされません。Obsidian でスライドとして表示されていたノート（プレビューを開いたノート）も、frontmatter に `marp: true` がなければここではデッキとして描画されません。そのような Vault に必要な変更はこの 1 行の追加だけです。デッキの本体（セパレータ、`theme` / `paginate` などの directive、標準 Marp 構文）は保存された内容をそのまま使います。つまり、出力は Marp の意味論に従いますが、プラグインの設定不要なプラグインレベルでのアクティベーションは再現しません。完全なドロップイン互換ではなく「コンテンツ互換」として扱ってください。
+> **有効化の条件.** Riebeckite は Obsidian プラグインと同じ方法では有効になりません。Obsidian でスライドプレビューを開いてスライドとして表示していたノートも、frontmatter に `marp: true` がなければここではデッキとして描画されません。そのような Vault に必要な変更はこの 1 行の追加だけです。デッキの本体（セパレータ、`theme` / `paginate` などのディレクティブ、標準 Marp 構文）は保存された内容をそのまま使います。つまり、出力は Marp のセマンティクスに従いますが、設定なしでプラグイン単位に有効になる Obsidian 側の挙動は再現しません。完全なドロップイン互換ではなく「コンテンツ互換」として扱ってください。
 
 ## インラインデッキ
 
@@ -63,7 +75,7 @@ paginate: true
 ```
 ````
 
-## どのように描画されるか
+## 描画の仕組み
 
 `@marp-team/marp-core` をビルド時に動的 import して `Marp#render` を呼び出します。Marp Core はクライアントバンドルには含まれません。1 つのコードブロックは次の HTML に置き換わります。
 
@@ -82,22 +94,30 @@ paginate: true
 </figure>
 ```
 
-### 生成 CSS のスコープとインライン化
+### 生成される CSS のスコープとインライン化
 
-プラグインは `<head>` へ注入できないため、Marp が生成した CSS は `<figure class="rb-marp">` の中へ `<style>` 要素としてインライン展開します。漏れを防ぐため次の処理を行います。
+プラグインは `<head>` へ注入できないため、Marp が生成した CSS は `<figure class="rb-marp">` の中へ `<style>` 要素としてインライン化します。ほかの要素に漏れないよう、次の処理を行います。
 
 - Marp の `container` オプションでデッキのコンテナクラスを `rb-marp__deck` に固定し、生成 CSS の全セレクタがそのコンテナ配下に来るようにする
 - コンテナセレクタを `.rb-marp` の子孫に限定する（例: `.rb-marp div.rb-marp__deck > svg > foreignObject > section`）
 - グローバルに漏れる `@page` ルールを削除し、`@media print` 内の `html, body` を `.rb-marp` に置き換える
 
-同じテーマのデッキが 1 ページに複数ある場合、生成 CSS が同一になるため `<style>` は 1 回だけ出力します。
+同じテーマのデッキが 1 ページに複数ある場合、生成される CSS が同一になるため `<style>` は 1 回だけ出力されます。
 
 ### ビルド時のレンダリング
 
-- `script: false` でレンダリングするため、デッキにクライアントスクリプトは含まれません。SVG スライドのサイズは `style.css` 側で調整します
+- `script: false` でレンダリングするため、Marp Core 由来のクライアントスクリプトは含まれません。SVG スライドのサイズは `style.css` 側で調整します
 - キャプションはコードブロックの `title` から取得します
 - `data-marp-slides` にスライド枚数、`data-marp` にデッキであることを示す属性を付けます
 
+### ビューア
+
+小さなクライアントエントリ（`initMarpDecks`）が、2 枚以上のスライドを持つデッキを 1 枚ずつ表示するビューアに変えます。前後ボタン、スライド枚数、全画面ボタンを備え、デッキにフォーカスがある間は矢印キー、Page Up / Page Down、Home、End でも移動できます。JavaScript がない場合は全スライドが縦に積まれたまま表示されます。
+
+### スライド単体ページ
+
+公開された全文 Marp ノートには、パーマリンクの前に `/slides` を付けたデッキ専用ページも生成されます。`/notes/talk/` で公開されるノートは `/slides/notes/talk/` でも開けます。Marp ソースの折りたたみを除いて同じデッキを表示し、ノート本来のページは変わりません。インラインの `marp` フェンスには単体ページは生成されません。
+
 ## オプション
 
 | 項目 | 既定値 | 説明 |
@@ -113,14 +133,16 @@ paginate: true
 
 ## 制約
 
-- クライアント側でのスライド編集やページ送り UI は提供しません。ビルド時に静的な HTML/CSS を生成するだけです
+- クライアント側でのスライド編集は提供しません。ページ送りは組み込みビューアのみで、JavaScript が必要です。JavaScript がない場合は全スライドが縦に積まれて表示されます
 - 利用できるテーマは Marp Core に登録済みのものに限られます。任意のテーマ CSS の読み込みには対応していません
-- `inlineSVG: false` を指定すると SVG ラッパーなしの `<section>` を出力します。生成 CSS もその構造に合わせて変わります
+- `inlineSVG: false` を指定すると SVG ラッパーなしの `<section>` を出力します。生成される CSS もその構造に合わせて変わります
+- 文書全体のデッキは通常の Markdown パイプラインを通らないため、スライド内の Obsidian の `![image](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/image.ja.md)` 埋め込みは解決されません。公開サイトに存在するパスを指定した通常の Markdown 画像記法を使ってください（Marp Slides 自体もウィキリンクには対応していません）
 
 ## 主なエクスポート
 
-- `marp(options?)` / `marpPlugin(options?)`: プラグインを作成する
+- `marp(options?)` / `marp(options?)`: プラグインを作成する
 - `isMarpDocument(matter?)`: frontmatter の `marp: true` を判定するヘルパー
+- `initMarpDecks()`: ビューアの初期化関数。`@riebeckite/plugin-marp/client` から公開
 - 型: `MarpOptions`、`MarpDeck`、`MarpBuildRenderResult`
 
 ## 関連資料

package/dist/client.d.ts

@@ -0,0 +1 @@
+export { initMarpDecks } from "./src/viewer.js";

package/dist/client.js

@@ -0,0 +1,87 @@
+// src/viewer.ts
+var FIGURE_SELECTOR = "figure[data-marp]";
+var DECK_SELECTOR = ":scope > div";
+var COUNTER_SEPARATOR = " / ";
+function initMarpDecks() {
+  if (typeof document === "undefined") return;
+  for (const figure of document.querySelectorAll(
+    FIGURE_SELECTOR
+  )) {
+    if (figure.dataset.marpViewer !== void 0) continue;
+    const deck = figure.querySelector(DECK_SELECTOR);
+    if (!deck) continue;
+    const slides = Array.from(deck.children);
+    if (slides.length < 2) continue;
+    mountViewer(figure, deck, slides);
+  }
+}
+function mountViewer(figure, deck, slides) {
+  figure.dataset.marpViewer = "";
+  figure.tabIndex = 0;
+  const controls = document.createElement("div");
+  controls.className = "rb-marp__controls";
+  const previous = createButton("Previous slide", "←");
+  const next = createButton("Next slide", "→");
+  const counter = document.createElement("span");
+  counter.className = "rb-marp__counter";
+  counter.setAttribute("aria-live", "polite");
+  controls.append(previous, next, counter);
+  if (typeof figure.requestFullscreen === "function") {
+    const fullscreen = createButton("Fullscreen", "⛶");
+    fullscreen.addEventListener("click", () => {
+      if (document.fullscreenElement === figure) {
+        void document.exitFullscreen();
+        return;
+      }
+      void figure.requestFullscreen();
+    });
+    figure.addEventListener("fullscreenchange", () => {
+      fullscreen.setAttribute(
+        "aria-label",
+        document.fullscreenElement === figure ? "Exit fullscreen" : "Fullscreen"
+      );
+    });
+    controls.append(fullscreen);
+  }
+  deck.after(controls);
+  let index = 0;
+  const show = (target) => {
+    index = Math.min(Math.max(target, 0), slides.length - 1);
+    slides.forEach((slide, slideIndex) => {
+      if (slideIndex === index) slide.removeAttribute("hidden");
+      else slide.setAttribute("hidden", "");
+    });
+    counter.textContent = `${index + 1}${COUNTER_SEPARATOR}${slides.length}`;
+    previous.disabled = index === 0;
+    next.disabled = index === slides.length - 1;
+  };
+  previous.addEventListener("click", () => show(index - 1));
+  next.addEventListener("click", () => show(index + 1));
+  figure.addEventListener("keydown", (event) => {
+    if (event.key === "ArrowLeft" || event.key === "PageUp") {
+      event.preventDefault();
+      show(index - 1);
+    } else if (event.key === "ArrowRight" || event.key === "PageDown") {
+      event.preventDefault();
+      show(index + 1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      show(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      show(slides.length - 1);
+    }
+  });
+  show(0);
+}
+function createButton(label, glyph) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "rb-marp__control";
+  button.setAttribute("aria-label", label);
+  button.textContent = glyph;
+  return button;
+}
+export {
+  initMarpDecks
+};

package/dist/index.d.ts

@@ -8,5 +8,3 @@ export type { MarpBuildRenderResult, MarpDeck, MarpOptions, } from "./src/types.
  * never becomes part of the client bundle.
  */
 export declare function marp(options?: MarpOptions): import("@riebeckite/core").RiebeckitePlugin<MarpOptions>;
-/** Alias matching the `*Plugin` naming used by other Riebeckite plugins. */
-export declare const marpPlugin: typeof marp;

package/dist/index.js

@@ -293,10 +293,14 @@ function buildFigure(input) {
   }
   children.push(raw(input.deckHtml));
   children.push(
-    element("details", { className: `${input.className}__fallback` }, [
-      element("summary", {}, [text("Marp source")]),
-      element("pre", {}, [element("code", {}, [text(input.source)])])
-    ])
+    element(
+      "details",
+      { className: `${input.className}__fallback rb-source-fallback` },
+      [
+        element("summary", {}, [text("Marp source")]),
+        element("pre", {}, [element("code", {}, [text(input.source)])])
+      ]
+    )
   );
   return element(
     "figure",
@@ -350,11 +354,52 @@ var init_rehype = __esm({
 });
 
 // index.ts
-init_rehype();
 import {
+  createClientEntry,
   createStyleAsset,
   definePlugin
 } from "@riebeckite/core";
+
+// src/page.ts
+init_rehype();
+var MARP_SLIDES_BASE_PATH = "/slides";
+function marpSlidesPath(permalink) {
+  return `${MARP_SLIDES_BASE_PATH}${permalink}`.replace(/\/+$/, "");
+}
+function listMarpDeckEntries(manifest) {
+  return manifest.publicEntries.filter(
+    (entry) => isMarpDocument(entry.frontmatter)
+  );
+}
+function listMarpSlidesPaths(manifest) {
+  return [
+    ...new Set(
+      listMarpDeckEntries(manifest).map(
+        (entry) => marpSlidesPath(entry.permalink)
+      )
+    )
+  ];
+}
+function findMarpDeckEntry(manifest, pathname) {
+  const normalized = pathname.replace(/\/+$/, "");
+  return listMarpDeckEntries(manifest).find(
+    (entry) => marpSlidesPath(entry.permalink).replace(/\/+$/, "") === normalized
+  ) ?? null;
+}
+function resolveMarpSlidesPage(context) {
+  const entry = findMarpDeckEntry(context.manifest, context.pathname);
+  if (!entry) return null;
+  return {
+    type: "marp-slides",
+    pathname: context.pathname,
+    title: entry.title,
+    body: `<div class="rb-marp-slides">${entry.html}</div>`,
+    ...entry.publicLocation.language === void 0 ? {} : { language: entry.publicLocation.language }
+  };
+}
+
+// index.ts
+init_rehype();
 var CLASS_NAME_PATTERN = /^[A-Za-z][A-Za-z0-9_-]*$/;
 function marp(options = {}) {
   return definePlugin({
@@ -369,10 +414,28 @@ function marp(options = {}) {
     extendHtmlPipeline: (pipeline) => {
       pipeline.use(rehypeMarpLazy, options);
     },
-    assets: [createStyleAsset("marp", "@riebeckite/plugin-marp/style.css")]
+    pageTypes: [
+      {
+        id: "marp-slides",
+        directoryIndex: true,
+        paths: ({ manifest }) => listMarpSlidesPaths(manifest),
+        outputDependencies: ({ manifest, pathname }) => {
+          const entry = findMarpDeckEntry(manifest, pathname);
+          return entry ? [{ type: "content", slug: entry.slug }] : [{ type: "unknown" }];
+        },
+        resolve: (context) => resolveMarpSlidesPage(context)
+      }
+    ],
+    assets: [createStyleAsset("marp", "@riebeckite/plugin-marp/style.css")],
+    clientEntries: [
+      createClientEntry(
+        "marp",
+        "@riebeckite/plugin-marp/client",
+        "initMarpDecks"
+      )
+    ]
   });
 }
-var marpPlugin = marp;
 function validateMarpOptions(options) {
   if (!options) return [];
   const issues = [];
@@ -408,6 +471,5 @@ function rehypeMarpLazy(options = {}) {
 }
 export {
   isMarpDocument,
-  marp,
-  marpPlugin
+  marp
 };

package/dist/src/page.d.ts

@@ -0,0 +1,5 @@
+import type { ContentManifest, ContentManifestEntry, PluginPage, PluginPageContext } from "@riebeckite/core";
+export declare function marpSlidesPath(permalink: string): string;
+export declare function listMarpSlidesPaths(manifest: ContentManifest): readonly string[];
+export declare function findMarpDeckEntry(manifest: ContentManifest, pathname: string): ContentManifestEntry | null;
+export declare function resolveMarpSlidesPage(context: PluginPageContext): PluginPage | null;

package/dist/src/render.d.ts

@@ -1,5 +1,5 @@
 import type { MarpBuildRenderResult } from "./types.js";
-export type MarpRenderRequest = {
+type MarpRenderRequest = {
     theme: string;
     allowHtml: boolean;
     math: boolean;
@@ -12,3 +12,4 @@ export type MarpRenderRequest = {
  * code depends only on this contract, never on `@marp-team/marp-core` types.
  */
 export declare function renderMarpDeck(markdown: string, request: MarpRenderRequest): Promise<MarpBuildRenderResult>;
+export {};

package/dist/src/types.d.ts

@@ -42,7 +42,7 @@ export type TextNode = {
     type: "text";
     value: string;
 };
-export type RawNode = {
+type RawNode = {
     type: "raw";
     value: string;
 };
@@ -50,3 +50,4 @@ export type HastNode = ElementNode | TextNode | RawNode | {
     type: string;
     [key: string]: unknown;
 };
+export {};

package/dist/src/viewer.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Turns rendered decks into one-slide-at-a-time viewers.
+ *
+ * Without JavaScript every slide stays visible in a vertical stack, so the
+ * viewer is a progressive enhancement rather than a requirement.
+ */
+export declare function initMarpDecks(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-marp",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -12,11 +12,17 @@
       "source": "./index.ts",
       "default": "./dist/index.js"
     },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js",
+      "source": "./client.ts",
+      "default": "./dist/client.js"
+    },
     "./style.css": "./style.css"
   },
   "dependencies": {
     "@marp-team/marp-core": "^4.4.0",
-    "@riebeckite/core": "0.0.31"
+    "@riebeckite/core": "0.0.33"
   },
   "devDependencies": {
     "tsx": "^4.22.4"

package/style.css

@@ -38,24 +38,96 @@
   margin-bottom: 0;
 }
 
-.rb-marp__fallback {
+figure[data-marp][data-marp-viewer] > div:first-of-type > [hidden] {
+  display: none;
+}
+
+figure[data-marp][data-marp-viewer] > div:first-of-type > svg[data-marpit-svg] {
+  margin-bottom: 0;
+}
+
+figure[data-marp][data-marp-viewer]:focus-visible {
+  outline: 2px solid var(--rb-color-accent, currentColor);
+  outline-offset: 2px;
+}
+
+.rb-marp__controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
   border-top: 1px solid var(--rr-marp-rule);
+}
+
+.rb-marp__control {
+  min-width: 2rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--rr-marp-rule);
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: 1.2;
+  cursor: pointer;
+}
+
+.rb-marp__control:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.rb-marp__counter {
+  margin-left: auto;
   color: var(--rr-marp-muted);
   font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
 }
 
-.rb-marp__fallback summary {
-  cursor: pointer;
-  padding: 0.5rem 0.75rem;
+figure[data-marp]:fullscreen {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: 0;
+  background: var(--rr-marp-paper);
 }
 
-.rb-marp__fallback pre {
-  overflow: auto;
-  margin: 0 1rem 0.75rem;
-  padding: 0.75rem;
-  border-top: 1px solid var(--rr-marp-rule);
-  color: var(--rr-marp-ink);
-  background: color-mix(in srgb, var(--rr-marp-ink) 6%, transparent);
+figure[data-marp]:fullscreen > figcaption {
+  display: none;
+}
+
+figure[data-marp]:fullscreen > div:first-of-type {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 1rem;
+}
+
+figure[data-marp]:fullscreen > div:first-of-type > svg[data-marpit-svg] {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  margin: 0;
+}
+
+figure[data-marp]:fullscreen > details {
+  display: none;
+}
+
+.rb-marp-slides {
+  margin: 2rem 0;
+}
+
+.rb-marp-slides > figure[data-marp] {
+  margin: 0;
+}
+
+.rb-marp-slides > figure[data-marp] > details {
+  display: none;
 }
 
 :is(:root, .rb-theme-root)[data-theme="dark"] .rb-marp {