@miragon/slidev-toolkit 1.2.1 → 1.3.0

package/components/CodeBlock.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+/**
+ * CodeBlock — beschriftetes Code-„Fenster" in Miragon-CI.
+ *
+ * Rahmt einen Markdown-Code-Fence (im Default-Slot) mit einer weißen Brand-Card
+ * (wie <Card>: weiß, dünne Border, weicher blauer Schatten) und einer Kopfzeile
+ * aus optionalem Dateinamen (links, Geist Mono, gedämpft) und optionalem
+ * Sprach-Badge (rechts, blau — der einzige Brand-Akzent). Der eingebettete Fence
+ * behält Shikis Syntax-Highlighting in Reinform; sein Rahmen und jeglicher
+ * Zeilen-Hintergrund werden hier zurückgesetzt, damit die Komponente den Rahmen
+ * besitzt und der Code klar auf Weiß steht.
+ *
+ * Props:
+ *   file        Dateiname/Pfad in der Kopfzeile (optional).
+ *   lang        Sprach-Badge rechts in der Kopfzeile (optional, z. B. "md").
+ *   size        CSS-Schriftgröße des Codes (z. B. "0.9rem", "14px"); ohne
+ *               Angabe die Standardgröße.
+ *   hideHeader  Kopfzeile ausblenden, auch wenn file/lang gesetzt sind
+ *               (Standard: sichtbar).
+ *
+ * Nutzung (Fence auf eigenen Zeilen, Leerzeilen drumherum, damit er als
+ * Markdown geparst wird — wie die Bullet-Regel bei <SplitView>):
+ *
+ *   <CodeBlock file="deck/slides.md" lang="md">
+ *
+ *   ```md
+ *   # Build decks like **code**
+ *   ```
+ *
+ *   </CodeBlock>
+ */
+const props = defineProps<{
+  file?: string
+  lang?: string
+  size?: string
+  hideHeader?: boolean
+}>()
+
+const showHeader = () => Boolean((props.file || props.lang) && !props.hideHeader)
+</script>
+
+<template>
+  <div class="mg-code" :class="{ 'mg-code--sized': size }" :style="size ? { '--mg-code-size': size } : undefined">
+    <div v-if="showHeader()" class="mg-code__bar">
+      <span v-if="file" class="mg-code__file">{{ file }}</span>
+      <span v-if="lang" class="mg-code__lang">{{ lang }}</span>
+    </div>
+    <div class="mg-code__body"><slot /></div>
+  </div>
+</template>
+
+<style scoped>
+.mg-code {
+  border-radius: 0.6rem;
+  border: 1px solid #e5e7eb;
+  background: var(--miragon-white);
+  box-shadow: 0 8px 20px rgba(51, 93, 229, 0.08);
+  overflow: hidden;
+}
+.mg-code__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.55rem 0.9rem;
+  background: var(--miragon-gray-light);
+  border-bottom: 1px solid #e5e7eb;
+}
+.mg-code__file {
+  font-family: var(--miragon-font-mono, ui-monospace, monospace);
+  font-size: 0.78rem;
+  color: var(--miragon-text-muted);
+}
+.mg-code__lang {
+  font-family: var(--miragon-font-mono, ui-monospace, monospace);
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--miragon-blue-dark);
+  background: var(--miragon-blue-light);
+  border-radius: 0.35rem;
+  padding: 0.1rem 0.45rem;
+}
+.mg-code__body {
+  padding: 0.4rem 0.5rem;
+}
+/* The nested Shiki fence keeps its highlighting but drops the bare-fence frame
+   from code.css — the component owns the border, radius and shadow. The inner
+   <code> reset guards against any layout that tints inline code: fenced code
+   must stay a clean, unhighlighted-background block. */
+.mg-code__body :deep(.slidev-code) {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  margin: 0;
+  padding: 0.5rem 0.6rem;
+  background: transparent;
+}
+.mg-code__body :deep(.slidev-code code) {
+  background: transparent;
+  padding: 0;
+}
+/* Optional per-instance font size. Slidev pins .slidev-code font-size with
+   !important, so the override needs it too. Only emitted when `size` is set,
+   leaving the default untouched otherwise. */
+.mg-code--sized :deep(.slidev-code) {
+  font-size: var(--mg-code-size) !important;
+}
+</style>

package/layouts/bpmn.vue

@@ -151,7 +151,7 @@ const diagramSrc = computed(() => withBase(props.diagram))
   margin: 0;
   line-height: 1.5;
 }
-.bpmn-caption :deep(code) {
+.bpmn-caption :deep(:not(pre) > code) {
   font-family: var(--miragon-font-mono);
   font-size: 0.9em;
   background: var(--miragon-blue-light);

package/layouts/content.vue

@@ -175,7 +175,8 @@ const accentVar = computed(() =>
   text-decoration: none;
   border-bottom: 1px solid currentColor;
 }
-.content-body :deep(code) {
+
+.content-body :deep(:not(pre) > code) {
   font-family: var(--miragon-font-mono);
   font-size: 0.9em;
   background: var(--miragon-blue-light);

package/layouts/dmn.vue

@@ -165,7 +165,7 @@ const diagramSrc = computed(() => withBase(props.diagram))
   margin: 0;
   line-height: 1.5;
 }
-.dmn-caption :deep(code) {
+.dmn-caption :deep(:not(pre) > code) {
   font-family: var(--miragon-font-mono);
   font-size: 0.9em;
   background: var(--miragon-blue-light);

package/layouts/goodbad.vue

@@ -265,7 +265,8 @@ const rightVerdictClass = computed(() => (props.leftIsGood ? 'verdict-bad' : 've
   border-radius: 0.18rem;
   background: var(--gb-grad);
 }
-.panel-body :deep(code) {
+
+.panel-body :deep(:not(pre) > code) {
   font-family: var(--miragon-font-mono);
   font-size: 0.9em;
   background: var(--miragon-blue-light);
@@ -276,10 +277,6 @@ const rightVerdictClass = computed(() => (props.leftIsGood ? 'verdict-bad' : 've
 .panel-body :deep(pre) {
   font-family: var(--miragon-font-mono);
   font-size: 0.9rem;
-  background: var(--miragon-blue-light);
-  color: var(--miragon-text-primary);
-  padding: 0.8rem 1rem;
-  border-radius: 0.5rem;
   margin: 0.4rem 0 0;
   overflow-x: auto;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miragon/slidev-toolkit",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Miragon Slidev toolkit: the brand theme, the layout archetypes, the reusable components (Card, CardGrid, StepList, Figure, SplitView) and the BrandMeshBackground animation. Single source of design truth, consumed by the reference deck in this repo.",
   "keywords": [
     "slidev-theme",

package/styles/code.css

@@ -0,0 +1,33 @@
+/* Code blocks — Miragon CI frame for every Shiki fence.
+ *
+ * Slidev renders a Markdown ```lang fence to <pre class="slidev-code shiki …">.
+ * By default that is a bare, unframed block. Here we give every fence the same
+ * white-card treatment the <Card> component uses (white background, thin grey
+ * border, soft blue brand shadow, rounded corners) so code reads as part of the
+ * design system. Font is already Geist Mono via --slidev-code-font-family
+ * (index.css). Colours come from theme.css — no hardcoded hex except the shared
+ * border/scrollbar neutrals already used across the toolkit.
+ *
+ * The <CodeBlock> component wraps a fence in a titled window; it strips this
+ * bare frame from the nested fence itself (see CodeBlock.vue) and supplies its
+ * own header + frame instead.
+ */
+
+/* Every Shiki fence carries both `.shiki` and `.slidev-code`. Targeting both
+   (specificity 0,2,0) frames code in EVERY layout — including custom ones like
+   `goodbad` whose panels sit outside `.slidev-layout` — while staying low enough
+   that the <CodeBlock> component's :deep rules (0,3,0) can still reset it. */
+.shiki.slidev-code {
+  background: var(--miragon-white);
+  border: 1px solid #e5e7eb;
+  border-radius: 0.6rem;
+  box-shadow: 0 8px 20px rgba(51, 93, 229, 0.06);
+  overflow-x: auto;
+}
+
+/* A caption line under a fence (a following *italic* line) reads as a muted
+   label, not body text. Kept subtle. */
+.shiki.slidev-code + p em:only-child {
+  color: var(--miragon-text-muted);
+  font-size: 0.8rem;
+}

package/styles/index.css

@@ -6,6 +6,7 @@
    als in 0.49). */
 @import './theme.css';
 @import './fonts.css';
+@import './code.css';
 
 /* Brand typography: Geist for everything, Geist Mono for code. Set on the app
    root so it cascades into every layout; redirect Slidev's code-font variable