From 36c5dc3f386e9d2c3a1e0512119e6e4c328bff35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mike=20Repe=C4=87?= Date: Fri, 21 Aug 2026 15:28:37 +0000 Subject: [PATCH] fix(editor): Remove doubled code block box in markdown renderer (#36844) Co-authored-by: Claude Fable 5 --- .../src/components/N8nMarkdown/Markdown.stories.ts | 7 +++++++ .../design-system/src/components/N8nMarkdown/Markdown.vue | 6 ++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.stories.ts index 69067e2ed48..1ecc0e7e42c 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.stories.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.stories.ts @@ -76,6 +76,13 @@ WithCheckboxes.args = { loading: false, }; +export const WithCodeBlock = Template.bind({}); +WithCodeBlock.args = { + content: + 'To get started, run the following in a terminal:\n\n```\necho "Hello world"\n```\n\nInline code like `EXAMPLE_VAR=true` should also render.\n', + loading: false, +}; + const TemplateWithYoutubeEmbed: StoryFn = (args, { argTypes }) => ({ setup: () => ({ args }), props: Object.keys(argTypes), diff --git a/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.vue b/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.vue index db496d8db96..fae67f9acff 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.vue @@ -328,8 +328,10 @@ const onCheckboxChange = (index: number) => { } } + // The pre box (background + padding) comes from the global .n8n-markdown + // styles in css/markdown.scss; a second box on code doubles it up. pre > code { - background-color: var(--color--background); + background-color: transparent; color: var(--color--text--shade-1); } @@ -432,6 +434,7 @@ input[type='checkbox'] + label { } pre > code { + padding: var(--spacing--sm); background-color: var(--sticky--code--color--background); color: var(--sticky--code--color--text); } @@ -468,7 +471,6 @@ input[type='checkbox'] + label { pre > code { display: block; - padding: var(--spacing--sm); overflow-x: auto; }