fix(editor): Remove doubled code block box in markdown renderer (#36844)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

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),

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;
 	}