add bottom margin to Code with nomargin prop to opt out

ryanatkn · ryanatkn · commit 908896a2e160 · 2026-01-07T09:29:21.000-05:00
diff --git a/.changeset/calm-buses-shout.md b/.changeset/calm-buses-shout.md
@@ -0,0 +1,5 @@
+---
+'@fuzdev/fuz_code': minor
+---
+
+add bottom margin to `Code` with `nomargin` prop to opt out
diff --git a/src/lib/Code.svelte b/src/lib/Code.svelte
@@ -12,6 +12,7 @@
 		grammar,
 		inline = false,
 		wrap = false,
+		nomargin = false,
 		syntax_styler = syntax_styler_global,
 		children,
 		...rest
@@ -74,6 +75,13 @@
 		 * @default false
 		 */
 		wrap?: boolean;
+		/**
+		 * Whether to disable the default margin-bottom on block code.
+		 * Block code has `margin-bottom: var(--space_lg)` by default when not `:last-child`.
+		 *
+		 * @default false
+		 */
+		nomargin?: boolean;
 		/**
 		 * Custom SyntaxStyler instance to use for highlighting.
 		 * Allows using a different styler with custom grammars or configuration.
@@ -121,7 +129,7 @@
 
 <!-- eslint-disable svelte/no-at-html-tags -->
 
-<code {...rest} class:inline class:wrap data-lang={lang}
+<code {...rest} class:inline class:wrap class:nomargin data-lang={lang}
 	>{#if highlighting_disabled}{content}{:else if children}{@render children(
 			html_content,
 		)}{:else}{@html html_content}{/if}</code
@@ -143,4 +151,8 @@
 		/* unset what we set above, otherwise rely on Fuz CSS base styles */
 		white-space: pre-wrap;
 	}
+
+	code:not(.inline):not(.nomargin):not(:last-child) {
+		margin-bottom: var(--space_lg);
+	}
 </style>
diff --git a/src/routes/CodeTome.svelte b/src/routes/CodeTome.svelte
@@ -76,9 +76,7 @@ import '@fuzdev/fuz_code/theme_variables.css'; // also this if not using Fuz CSS
 		<a href="https://github.com/pngwn/prism-svelte"><code>prism-svelte</code></a>
 		by <a href="https://github.com/pngwn">@pngwn</a>:
 	</p>
-	<div class="mb_lg">
-		<Code content={'<Code content="<scr..." />'} />
-	</div>
+	<Code content={'<Code content="<scr..." />'} />
 	<p>styled:</p>
 	<div>
 		<Code
@@ -99,9 +97,7 @@ import '@fuzdev/fuz_code/theme_variables.css'; // also this if not using Fuz CSS
 	<p>
 		<TomeLink name="Code" /> supports TypeScript with <code>lang="ts"</code>:
 	</p>
-	<div class="mb_lg">
-		<Code content={`<Code lang="ts" content="export type A<T> = ('b' | 3) & T;" />`} />
-	</div>
+	<Code content={`<Code lang="ts" content="export type A<T> = ('b' | 3) & T;" />`} />
 	<div>
 		<Code lang="ts" content={`export type A<T> = ('b' | 3) & T;`} />
 	</div>
@@ -112,9 +108,7 @@ import '@fuzdev/fuz_code/theme_variables.css'; // also this if not using Fuz CSS
 		<TomeLink name="Code" /> supports Markdown with <code>lang="md"</code>, and fenced blocks for
 		all languages:
 	</p>
-	<div class="mb_lg">
-		<Code content={`<Code lang="md" content="# hello \`world\` ..." />`} />
-	</div>
+	<Code content={`<Code lang="md" content="# hello \`world\` ..." />`} />
 	<div>
 		<Code lang="md" content={`# hello \`world\`\n\n\`\`\`ts\n\tconst a = 1;\n\`\`\``} />
 	</div>
@@ -124,9 +118,7 @@ import '@fuzdev/fuz_code/theme_variables.css'; // also this if not using Fuz CSS
 	<p>
 		Passing <code>lang={'{'}null}</code> disables syntax styling:
 	</p>
-	<div class="mb_lg">
-		<Code content={'<Code lang={null} content="<aside>all is gray</aside>" />'} />
-	</div>
+	<Code content={'<Code lang={null} content="<aside>all is gray</aside>" />'} />
 	<Code lang={null} content={`<aside>all is gray</aside>`} />
 </section>
 <section>
diff --git a/src/routes/library.json b/src/routes/library.json
@@ -195,6 +195,12 @@
 								"optional": true,
 								"description": "Whether to wrap long lines in block code.\nSets `white-space: pre-wrap` instead of `white-space: pre`.\n\n**Behavior:**\n- Wraps at whitespace (spaces, newlines)\n- Long tokens without spaces (URLs, hashes) will still scroll horizontally\n- Default `false` provides traditional code block behavior\n\nOnly affects block code (ignored for inline mode)."
 							},
+							{
+								"name": "nomargin",
+								"type": "boolean",
+								"optional": true,
+								"description": "Whether to disable the default margin-bottom on block code.\nBlock code has `margin-bottom: var(--space_lg)` by default when not `:last-child`."
+							},
 							{
 								"name": "syntax_styler",
 								"type": "SyntaxStyler",

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@fuzdev/fuz_code': minor
 +---
++
 +add bottom margin to `Code` with `nomargin` prop to opt out