frontend/src/components/common/MarkdownContent.vue

@@ -36,12 +36,10 @@ watch([() => props.source, diagramTheme, () => themeStore.currentThemeId, () =>
 .markdown-content li::marker { color: var(--color-markdown-marker); font-weight: 700; }
 .markdown-content .shiki { overflow: auto; margin: .85em 0; padding: 16px; border: 1px solid var(--color-code-border); border-radius: 6px; background: var(--color-code-background) !important; color: var(--color-code-text); font-family: var(--font-ui-mono); font-size: .875em; line-height: 1.45; tab-size: 4; }
 .markdown-content code { padding: .1em .3em; border-radius: var(--radius-sm); background: var(--color-background-tertiary); font-family: var(--font-ui-mono); }
-.markdown-content .shiki code { display: block; min-width: max-content; padding: 0; background: transparent; font: inherit; }
 .markdown-content :not(pre) > code { background: var(--color-code-background); color: var(--color-code-text); border: 1px solid var(--color-code-border); }
 .markdown-content div.markdown-math { overflow-x: auto; padding-block: .5em; }
 .markdown-content h4, .markdown-content h5, .markdown-content h6 { margin: 1em 0 .5em; font-weight: 600; }
 .markdown-content input[type="checkbox"] { margin-right: .45em; accent-color: var(--color-accent-primary); }
-.markdown-content .shiki .line { display: block; min-height: 1.45em; }
 .markdown-content blockquote { padding-left: 1em; border-left: 3px solid var(--color-accent-primary); color: var(--color-text-secondary); }
 .markdown-content table { width: 100%; margin: .65em 0; border-collapse: collapse; }
 .markdown-content th, .markdown-content td { padding: .45em .65em; border: 1px solid var(--color-markdown-grid); text-align: left; }

frontend/src/features/themes/CommunityThemePreview.spec.ts

@@ -29,6 +29,12 @@ it.each(themes)('previews shared component states safely for $theme_id', theme =
     expect(doc.querySelector('style')!.textContent).toContain('.button-primary:hover')
     expect(doc.querySelector('style')!.textContent).not.toContain('color:white')
     const rules = Array.from(doc.styleSheets[0]!.cssRules) as CSSStyleRule[]
+    // The sandbox cannot inherit MarkdownContent's component stylesheet.
+    const codeRule = rules.find(rule => rule.selectorText === '.markdown-content .shiki code')!
+    const lineRule = rules.find(rule => rule.selectorText === '.markdown-content .shiki .line')!
+    expect(codeRule.style.getPropertyValue('display')).toBe('block')
+    expect(lineRule.style.getPropertyValue('display')).toBe('block')
+    expect(lineRule.style.getPropertyValue('min-height')).toBe('1.45em')
     const rootRule = rules.filter(rule => rule.selectorText === 'html').pop()!
     const bodyRule = rules.filter(rule => rule.selectorText === 'body').pop()!
     // The embedded document must override the app-shell overflow lock.

frontend/src/styles/markdown-behavior.css

@@ -19,6 +19,8 @@
 .markdown-callout[data-collapsed='true'] { border-style: dashed; border-inline-start-style: solid; }
 .markdown-content details.markdown-callout:not([open]) { border-style: dashed; border-inline-start-style: solid; }
 .editor-pane.source { caret-color: var(--color-accent-primary); }
+.markdown-content .shiki code { display: block; min-width: max-content; padding: 0; background: transparent; font: inherit; }
+.markdown-content .shiki .line { display: block; min-height: 1.45em; }
 .markdown-content[data-code-wrap] .shiki { tab-size: var(--markdown-code-indent, 4); }
 .markdown-content[data-code-wrap='true'] .shiki code { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
 .markdown-content[data-line-numbers='true'] .shiki code { counter-reset: code-line; }