From 174e723545a3e02988d8c71014acac213bf2c2e9 Mon Sep 17 00:00:00 2001 From: KiriAky 107 Date: Sun, 6 Sep 2026 17:20:12 +0800 Subject: [PATCH] fix(themes): share code line layout with isolated previews --- frontend/src/components/common/MarkdownContent.vue | 2 -- frontend/src/features/themes/CommunityThemePreview.spec.ts | 6 ++++++ frontend/src/styles/markdown-behavior.css | 2 ++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/common/MarkdownContent.vue b/frontend/src/components/common/MarkdownContent.vue index 58fd755..9072245 100644 --- a/frontend/src/components/common/MarkdownContent.vue +++ b/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; } diff --git a/frontend/src/features/themes/CommunityThemePreview.spec.ts b/frontend/src/features/themes/CommunityThemePreview.spec.ts index b070942..91aef5e 100644 --- a/frontend/src/features/themes/CommunityThemePreview.spec.ts +++ b/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. diff --git a/frontend/src/styles/markdown-behavior.css b/frontend/src/styles/markdown-behavior.css index f12fafd..93c4454 100644 --- a/frontend/src/styles/markdown-behavior.css +++ b/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; }