@tnotesjs/ui 0.1.1 → 0.1.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tnotesjs/ui",
-  "version": "0.1.1",
-  "description": "Shared Vue UI for TNotes built-in blocks — consumed by VitePress (core) and Desk.",
+  "version": "0.1.3",
+  "description": "Shared Vue UI for TNotes built-in blocks — consumed by the TNotes SSG and Desk.",
   "type": "module",
   "exports": {
     ".": {
@@ -11,12 +11,49 @@
     },
     "./footprints-parse": {
       "types": "./src/components/Footprints/parse.ts",
+      "node": "./dist/components/Footprints/parse.js",
       "import": "./src/components/Footprints/parse.ts",
       "default": "./src/components/Footprints/parse.ts"
     },
-    "./styles/tokens.css": "./src/styles/tokens.css"
+    "./mindmap-parse": {
+      "types": "./src/components/Mindmap/markdown.ts",
+      "node": "./dist/components/Mindmap/markdown.js",
+      "import": "./src/components/Mindmap/markdown.ts",
+      "default": "./src/components/Mindmap/markdown.ts"
+    },
+    "./image-markdown": {
+      "types": "./src/markdown/image.ts",
+      "node": "./dist/markdown/image.js",
+      "import": "./src/markdown/image.ts",
+      "default": "./src/markdown/image.ts"
+    },
+    "./styles/tokens.css": "./src/styles/tokens.css",
+    "./styles/prose.css": "./src/styles/prose.css",
+    "./styles/code.css": "./src/styles/code.css",
+    "./styles/swiper.css": "./src/styles/swiper.css",
+    "./swiper": {
+      "types": "./src/swiper/hydrate.ts",
+      "import": "./src/swiper/hydrate.ts",
+      "default": "./src/swiper/hydrate.ts"
+    },
+    "./code": {
+      "types": "./src/code/highlight.ts",
+      "node": "./dist/code/highlight.js",
+      "import": "./src/code/highlight.ts"
+    },
+    "./code-block": "./src/components/CodeBlock/CodeBlock.vue",
+    "./code-group": "./src/components/CodeGroup/CodeGroup.vue",
+    "./badge": "./src/components/Badge/Badge.vue",
+    "./image-preview": "./src/components/ImagePreview/ImagePreview.vue",
+    "./bilibili-video": "./src/entries/bilibili-video.ts",
+    "./footprints": "./src/entries/footprints.ts",
+    "./mermaid": "./src/entries/mermaid.ts",
+    "./mindmap": "./src/entries/mindmap.ts",
+    "./notes-table": "./src/entries/notes-table.ts",
+    "./word-list": "./src/entries/word-list.ts"
   },
   "files": [
+    "dist",
     "src",
     "README.md",
     "LICENSE"
@@ -30,12 +67,14 @@
   "dependencies": {
     "@tnotesjs/mindmap-core": "^0.2.2",
     "marked": "^15.0.11",
-    "mermaid": "^11.17.0"
+    "mermaid": "^11.17.0",
+    "shiki": "4.4.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.8",
     "happy-dom": "^20.12.0",
     "sass": "^1.90.0",
+    "tsup": "8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.11",
     "vue": "^3.5.25"
@@ -57,14 +96,15 @@
   "keywords": [
     "tnotesjs",
     "vue",
-    "vitepress",
+    "ssg",
     "desk"
   ],
   "license": "MIT",
   "packageManager": "pnpm@11.10.0",
   "scripts": {
+    "build": "tsup src/code/highlight.ts src/components/Footprints/parse.ts src/components/Mindmap/markdown.ts src/markdown/image.ts --format esm --dts --out-dir dist --clean",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "test": "vitest run",
-    "prepublishOnly": "pnpm test && pnpm typecheck"
+    "prepublishOnly": "pnpm test && pnpm typecheck && pnpm build"
   }
 }

package/src/browser/clipboard.ts

@@ -0,0 +1,32 @@
+/** Clipboard fallback for Electron and non-secure local previews. */
+export async function copyText(text: string): Promise<void> {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return;
+    }
+  } catch {
+    /* use the synchronous user-gesture fallback */
+  }
+  const selection = document.getSelection();
+  const ranges = selection
+    ? Array.from({ length: selection.rangeCount }, (_, i) =>
+        selection.getRangeAt(i),
+      )
+    : [];
+  const active = document.activeElement;
+  const field = document.createElement("textarea");
+  field.value = text;
+  field.style.cssText = "position:fixed;left:-9999px;opacity:0";
+  document.body.append(field);
+  try {
+    field.select();
+    if (!document.execCommand("copy"))
+      throw new Error("Clipboard access denied");
+  } finally {
+    field.remove();
+    if (active instanceof HTMLElement) active.focus({ preventScroll: true });
+    selection?.removeAllRanges();
+    ranges.forEach((range) => selection?.addRange(range));
+  }
+}

package/src/browser/theme.ts

@@ -0,0 +1,22 @@
+export type ThemePreference = "light" | "dark" | "system";
+
+/** Explicit data-theme wins; safe during static/SSR rendering. */
+export function isDarkTheme(root?: HTMLElement): boolean {
+  root ??=
+    typeof document === "undefined" ? undefined : document.documentElement;
+  if (!root) return false;
+  if (root.dataset.theme === "light") return false;
+  return root.dataset.theme === "dark" || root.classList.contains("dark");
+}
+
+export function applyTheme(
+  preference: ThemePreference,
+  root = document.documentElement,
+): void {
+  const dark =
+    preference === "dark" ||
+    (preference === "system" &&
+      matchMedia("(prefers-color-scheme: dark)").matches);
+  root.dataset.theme = dark ? "dark" : "light";
+  root.classList.toggle("dark", dark);
+}

package/src/code/highlight.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest'
+import { highlightCode, highlightCodeSync, parseCodeMeta, prepareCodeHighlighter } from './highlight'
+
+describe('shared code rendering', () => {
+  it('parses titles, line offsets, highlight ranges and per-block overrides', () => {
+    expect(parseCodeMeta('ts:line-numbers=12 {1,3-5} [demo.ts]')).toEqual({
+      language: 'ts', title: 'demo.ts', startLine: 12, lineNumbers: true,
+      highlightedLines: [1, 3, 4, 5]
+    })
+    expect(parseCodeMeta('js {1-2} [setup.js]')).toEqual({
+      language: 'js', title: 'setup.js', startLine: 1, lineNumbers: true,
+      highlightedLines: [1, 2]
+    })
+    expect(parseCodeMeta('txt {3}')).toEqual({
+      language: 'txt', title: '', startLine: 1, lineNumbers: true,
+      highlightedLines: [3]
+    })
+    expect(parseCodeMeta('text:no-line-numbers').lineNumbers).toBe(false)
+    expect(parseCodeMeta('text {0,-1,8-3,1-9999999}').highlightedLines).toEqual([])
+  })
+  it('shares one lazy engine and matches build-time/browser output byte for byte', async () => {
+    const [a, b] = await Promise.all([prepareCodeHighlighter(['js']), prepareCodeHighlighter(['typescript'])])
+    expect(a).toBe(b)
+    const source = 'const answer = 42\nconsole.log(answer)\n'
+    const runtime = await highlightCode(source, 'js {2}')
+    expect(runtime).toBe(highlightCodeSync(source, 'js {2}'))
+    expect(runtime).toContain('--shiki-light:')
+    expect(runtime).toContain('--shiki-dark:')
+    expect(runtime).toContain('class="line highlighted"')
+    expect(runtime).toContain('data-line="2"')
+    expect(a.getLoadedLanguages()).not.toContain('cobol')
+  })
+  it('escapes unknown-language code instead of executing HTML', async () => {
+    const html = await highlightCode('<script>alert(1)</script> {{ injected }}', 'unknown-label')
+    expect(html).not.toContain('<script>')
+    const host = document.createElement('div')
+    host.innerHTML = html
+    expect(host.querySelector('script')).toBeNull()
+    expect(host.textContent).toBe('<script>alert(1)</script> {{ injected }}')
+    expect(html).toContain('{{ injected }}')
+  })
+  it('applies fence line highlights and offsets without Shiki notation', async () => {
+    const withNotation = await highlightCode(
+      'const x = 1 // [!code ++]\nconst y = 2 // [!code focus]',
+      'js:line-numbers=5 {2}',
+    )
+    // Magic comments stay as source text; Desk has no annotation write path.
+    expect(withNotation).toContain('[!code ++]')
+    expect(withNotation).not.toContain('diff add')
+    expect(withNotation).not.toContain('focused')
+    expect(withNotation).toContain('data-line="5"')
+    expect(withNotation).toContain('data-line="6"')
+    expect(withNotation).toContain('class="line highlighted"')
+  })
+})

package/src/code/highlight.ts

@@ -0,0 +1,171 @@
+import {
+  createHighlighterCore,
+  type HighlighterCore,
+  type ShikiTransformer,
+} from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import { bundledLanguages, bundledLanguagesAlias } from "shiki/langs";
+
+export interface CodeMeta {
+  language: string;
+  title: string;
+  lineNumbers: boolean;
+  startLine: number;
+  highlightedLines: number[];
+}
+
+/**
+ * A single cross-repository fixture. Core and Desk both consume this contract in
+ * their own test suites, so a parser or DOM change cannot silently diverge.
+ */
+export const SHARED_CODE_GROUP_CONTRACT = {
+  source: [
+    "::: code-group",
+    "```js:line-numbers=4 {2} [one.js]",
+    "console.log(1)",
+    "console.log(2)",
+    "```",
+    "```ts:no-line-numbers [two.ts]",
+    "const value: number = 2",
+    "```",
+    ":::",
+  ].join("\n"),
+  items: [
+    {
+      info: "js:line-numbers=4 {2} [one.js]",
+      code: "console.log(1)\nconsole.log(2)",
+      title: "one.js",
+      language: "js",
+      lineNumbers: true,
+      startLine: 4,
+      highlightedLines: [2],
+    },
+    {
+      info: "ts:no-line-numbers [two.ts]",
+      code: "const value: number = 2",
+      title: "two.ts",
+      language: "ts",
+      lineNumbers: false,
+      startLine: 1,
+      highlightedLines: [],
+    },
+  ],
+} as const;
+
+export function parseCodeMeta(info = "", defaultLineNumbers = true): CodeMeta {
+  const language =
+    info
+      .trim()
+      .match(/^[^\s{\[]+/)?.[0]
+      ?.split(":")[0] || "text";
+  const highlightedLines = new Set<number>();
+  const ranges = info.match(/\{([\d,\s-]+)\}/)?.[1] || "";
+  for (const range of ranges.split(",")) {
+    const match = range.trim().match(/^(\d+)(?:-(\d+))?$/);
+    if (!match) continue;
+    const start = Number(match[1]);
+    const end = Number(match[2] ?? start);
+    if (start < 1 || end < start || end - start > 10000) continue;
+    for (let line = start; line <= end; line++) highlightedLines.add(line);
+  }
+  return {
+    language,
+    title: info.match(/\[([^\]]*)\]/)?.[1]?.trim() || "",
+    lineNumbers: /:no-line-numbers\b/.test(info)
+      ? false
+      : /:line-numbers\b/.test(info) || defaultLineNumbers,
+    startLine: Math.max(1, Number(info.match(/:line-numbers=(\d+)/)?.[1] || 1)),
+    highlightedLines: [...highlightedLines].sort((a, b) => a - b),
+  };
+}
+
+let singleton: Promise<HighlighterCore> | undefined;
+let ready: HighlighterCore | undefined;
+const loading = new Map<string, Promise<void>>();
+
+export function normalizeCodeLanguage(language: string): string {
+  const id = language.toLowerCase();
+  if (id === "plain" || id === "txt" || id === "plaintext" || !id)
+    return "text";
+  if (id in bundledLanguages || id in bundledLanguagesAlias) return id;
+  // Unknown labels retain their caption, but display safely as plain text.
+  return "text";
+}
+
+/** One engine and one grammar cache for build-time and browser consumers. */
+export async function prepareCodeHighlighter(
+  languages: string[] = [],
+): Promise<HighlighterCore> {
+  singleton ??= createHighlighterCore({
+    engine: createJavaScriptRegexEngine(),
+    themes: [
+      import("shiki/themes/github-light.mjs"),
+      import("shiki/themes/github-dark.mjs"),
+    ],
+    langs: [],
+  }).then((highlighter) => (ready = highlighter));
+  const highlighter = await singleton;
+  await Promise.all(
+    languages.map(async (requested) => {
+      const language = normalizeCodeLanguage(requested);
+      if (
+        language === "text" ||
+        highlighter.getLoadedLanguages().includes(language)
+      )
+        return;
+      let pending = loading.get(language);
+      if (!pending) {
+        const loader =
+          bundledLanguages[language as keyof typeof bundledLanguages] ??
+          bundledLanguagesAlias[language as keyof typeof bundledLanguagesAlias];
+        if (!loader) return;
+        pending = highlighter.loadLanguage(loader).then(() => undefined);
+        loading.set(language, pending);
+        pending.catch(() => loading.delete(language));
+      }
+      await pending;
+    }),
+  );
+  return highlighter;
+}
+
+function transformers(meta: CodeMeta): ShikiTransformer[] {
+  // Fence `{N}` line highlights only — match Desk CodeMirror. No Shiki
+  // notation transformers (`[!code ++]` etc.); Desk has no write path for them.
+  return [
+    {
+      name: "tnotes-code-meta",
+      pre(node) {
+        this.addClassToHast(node, "tn-code-highlight");
+        node.properties.tabindex = 0;
+      },
+      line(node, line) {
+        node.properties["data-line"] = String(meta.startLine + line - 1);
+        if (meta.highlightedLines.includes(line))
+          this.addClassToHast(node, "highlighted");
+      },
+    },
+  ];
+}
+
+/** Markdown renderers prewarm document languages before their synchronous render pass. */
+export function highlightCodeSync(code: string, info = ""): string {
+  if (!ready)
+    throw new Error("Call prepareCodeHighlighter before rendering Markdown");
+  const meta = parseCodeMeta(info);
+  const normalizedLanguage = normalizeCodeLanguage(meta.language);
+  const language = ready.getLoadedLanguages().includes(normalizedLanguage)
+    ? normalizedLanguage
+    : "text";
+  return ready.codeToHtml(code.replace(/\n$/, ""), {
+    lang: language,
+    themes: { light: "github-light", dark: "github-dark" },
+    defaultColor: false,
+    transformers: transformers(meta),
+  });
+}
+
+export async function highlightCode(code: string, info = ""): Promise<string> {
+  await prepareCodeHighlighter([parseCodeMeta(info).language]);
+  return highlightCodeSync(code, info);
+}

package/src/components/Badge/Badge.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    text?: string;
+    type?: "info" | "tip" | "warning" | "danger";
+  }>(),
+  { text: "", type: "info" },
+);
+</script>
+
+<template>
+  <span class="tn-badge" :class="`tn-badge--${type}`"
+    ><slot>{{ text }}</slot></span
+  >
+</template>
+
+<style scoped>
+.tn-badge {
+  display: inline-block;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  padding: 1px 6px;
+  font: 600 12px/18px var(--tn-font-sans);
+  vertical-align: 1px;
+}
+
+.tn-badge--info,
+.tn-badge--tip {
+  border-color: color-mix(in srgb, var(--tn-c-brand) 40%, transparent);
+  background: color-mix(in srgb, var(--tn-c-brand) 12%, transparent);
+  color: var(--tn-c-brand-strong);
+}
+
+.tn-badge--warning {
+  background: var(--tn-c-warning-soft);
+  color: var(--tn-c-warning);
+}
+
+.tn-badge--danger {
+  background: var(--tn-c-danger-soft);
+  color: var(--tn-c-danger);
+}
+</style>

package/src/components/CodeBlock/CodeBlock.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onServerPrefetch, ref, watch } from "vue";
+import { highlightCode, parseCodeMeta } from "../../code/highlight";
+import { copyText } from "../../browser/clipboard";
+
+const props = withDefaults(
+  defineProps<{
+    code: string;
+    info?: string;
+    highlightedHtml?: string;
+    lineNumbers?: boolean;
+    title?: string;
+  }>(),
+  { info: "", lineNumbers: true },
+);
+const meta = computed(() => parseCodeMeta(props.info, props.lineNumbers));
+const html = ref(props.highlightedHtml || "");
+const error = ref("");
+const copied = ref(false);
+const fullscreen = ref(false);
+const trigger = ref<HTMLButtonElement>();
+let generation = 0;
+let copyTimer: ReturnType<typeof setTimeout> | undefined;
+
+async function renderCode(): Promise<void> {
+  const version = ++generation;
+  error.value = "";
+  if (props.highlightedHtml !== undefined) {
+    html.value = props.highlightedHtml;
+    return;
+  }
+  try {
+    const output = await highlightCode(props.code, props.info);
+    if (version === generation) html.value = output;
+  } catch (cause) {
+    if (version === generation) {
+      html.value = "";
+      error.value = `高亮失败：${cause instanceof Error ? cause.message : String(cause)}`;
+    }
+  }
+}
+watch(() => [props.code, props.info, props.highlightedHtml], renderCode, {
+  immediate: true,
+});
+onServerPrefetch(renderCode);
+async function copy(): Promise<void> {
+  try {
+    await copyText(props.code.replace(/\n$/, ""));
+    copied.value = true;
+    clearTimeout(copyTimer);
+    copyTimer = setTimeout(() => (copied.value = false), 1500);
+  } catch {
+    error.value = "复制失败，请检查剪贴板权限";
+  }
+}
+function closeFullscreen(): void {
+  fullscreen.value = false;
+  trigger.value?.focus({ preventScroll: true });
+}
+onBeforeUnmount(() => {
+  generation++;
+  clearTimeout(copyTimer);
+});
+</script>
+
+<template>
+  <section
+    class="tn-code-block"
+    :class="{ 'has-line-numbers': meta.lineNumbers }"
+  >
+    <header class="tn-code-block__header">
+      <span class="tn-code-block__title">{{ title || meta.title }}</span>
+      <slot name="language" :language="meta.language"
+        ><span class="tn-code-block__language">{{ meta.language }}</span></slot
+      >
+      <button
+        type="button"
+        class="tn-code-block__icon-btn"
+        :aria-label="copied ? '已复制' : '复制代码'"
+        @click="copy"
+      >
+        <svg
+          v-if="copied"
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+        <svg
+          v-else
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+          <path
+            d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+          />
+        </svg>
+      </button>
+      <button
+        ref="trigger"
+        type="button"
+        class="tn-code-block__icon-btn"
+        aria-label="全屏代码"
+        @click="fullscreen = true"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M8 3H5a2 2 0 0 0-2 2v3" />
+          <path d="M21 8V5a2 2 0 0 0-2-2h-3" />
+          <path d="M3 16v3a2 2 0 0 0 2 2h3" />
+          <path d="M16 21h3a2 2 0 0 0 2-2v-3" />
+        </svg>
+      </button>
+    </header>
+    <slot>
+      <div v-if="html" class="tn-code-block__content" v-html="html" />
+      <pre v-else class="tn-code-block__plain"><code>{{ code }}</code></pre>
+    </slot>
+    <p v-if="error" role="status" class="tn-code-block__error">{{ error }}</p>
+    <Teleport v-if="fullscreen" to="body">
+      <div
+        class="tn-code-fullscreen"
+        role="dialog"
+        aria-modal="true"
+        aria-label="代码全屏预览"
+        tabindex="-1"
+        @keydown.esc.stop.prevent="closeFullscreen"
+      >
+        <header>
+          <span>{{ title || meta.title || meta.language }}</span
+          ><button type="button" autofocus @click="closeFullscreen">
+            关闭（Esc）
+          </button>
+        </header>
+        <div
+          class="tn-code-block"
+          :class="{ 'has-line-numbers': meta.lineNumbers }"
+        >
+          <div v-if="html" class="tn-code-block__content" v-html="html" />
+          <pre v-else><code>{{ code }}</code></pre>
+        </div>
+      </div>
+    </Teleport>
+  </section>
+</template>

package/src/components/CodeGroup/CodeGroup.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { nextTick, onMounted, ref, watch } from "vue";
+import CodeBlock from "../CodeBlock/CodeBlock.vue";
+import { parseCodeMeta } from "../../code/highlight";
+
+export interface CodeGroupItem {
+  code?: string;
+  info?: string;
+  highlightedHtml?: string;
+  key?: string;
+}
+const props = defineProps<{ items: CodeGroupItem[] }>();
+const root = ref<HTMLElement>();
+const active = ref(0);
+function syncPanels(): void {
+  const panels =
+    root.value?.querySelectorAll<HTMLElement>(
+      ":scope > .tn-code-group__panels > .tn-code-group__panel",
+    ) ?? [];
+  panels.forEach((panel, index) => {
+    panel.hidden = index !== active.value;
+  });
+}
+watch(active, syncPanels, { flush: "post" });
+watch(
+  () => props.items.length,
+  (length) => {
+    active.value = Math.max(0, Math.min(active.value, length - 1));
+    nextTick(syncPanels);
+  },
+);
+onMounted(syncPanels);
+function navigate(event: KeyboardEvent, index: number): void {
+  let next = index;
+  if (event.key === "ArrowRight") next = (index + 1) % props.items.length;
+  else if (event.key === "ArrowLeft")
+    next = (index - 1 + props.items.length) % props.items.length;
+  else if (event.key === "Home") next = 0;
+  else if (event.key === "End") next = props.items.length - 1;
+  else return;
+  event.preventDefault();
+  active.value = next;
+  (event.currentTarget as HTMLElement).parentElement
+    ?.querySelectorAll<HTMLButtonElement>("button")
+    [next]?.focus();
+}
+</script>
+
+<template>
+  <section ref="root" class="tn-code-group">
+    <div
+      v-if="items.length > 1"
+      class="tn-code-group__tabs code-group-tabs"
+      role="tablist"
+      aria-label="代码分组"
+    >
+      <button
+        v-for="(item, index) in items"
+        :key="item.key || index"
+        type="button"
+        role="tab"
+        class="code-group-tab"
+        :class="{ active: active === index }"
+        :aria-selected="active === index"
+        :tabindex="active === index ? 0 : -1"
+        @click="active = index"
+        @keydown="navigate($event, index)"
+      >
+        {{
+          parseCodeMeta(item.info).title ||
+          parseCodeMeta(item.info).language ||
+          `代码 ${index + 1}`
+        }}
+      </button>
+    </div>
+    <div class="tn-code-group__panels code-group-panels">
+      <slot>
+        <div
+          v-for="(item, index) in items"
+          v-show="active === index"
+          :key="item.key || index"
+          class="tn-code-group__panel code-group-panel"
+          :class="{ active: active === index }"
+          role="tabpanel"
+        >
+          <slot name="panel" :item="item" :index="index"
+            ><CodeBlock
+              :code="item.code || ''"
+              :info="item.info"
+              :highlighted-html="item.highlightedHtml"
+          /></slot>
+        </div>
+      </slot>
+    </div>
+  </section>
+</template>