Expose Markdown content styles (#1049)

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

5 files changed, 126 insertions, 124 deletions

diff --git a/.changeset/warm-birds-smell.md b/.changeset/warm-birds-smell.md
new file mode 100644
index 00000000..e23822d9
--- /dev/null
+++ b/.changeset/warm-birds-smell.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Expose Markdown content styles in `@astrojs/starlight/style/markdown.css`
diff --git a/docs/src/content/docs/reference/overrides.md b/docs/src/content/docs/reference/overrides.md
index b3d95be9..a9938ad7 100644
--- a/docs/src/content/docs/reference/overrides.md
+++ b/docs/src/content/docs/reference/overrides.md
@@ -342,6 +342,8 @@ The default implementation shows a large title, tagline, and call-to-action link
 Component rendered around each page’s main content.
 The default implementation sets up basic styles to apply to Markdown content.
 
+The Markdown content styles are also exposed in `@astrojs/starlight/style/markdown.css` and scoped to the `.sl-markdown-content` CSS class.
+
 ---
 
 ### Footer
diff --git a/packages/starlight/components/MarkdownContent.astro b/packages/starlight/components/MarkdownContent.astro
index ffb0108a..0d40cd47 100644
--- a/packages/starlight/components/MarkdownContent.astro
+++ b/packages/starlight/components/MarkdownContent.astro
@@ -1,127 +1,6 @@
 ---
 import type { Props } from '../props';
+import '../style/markdown.css';
 ---
 
-<div class="content"><slot /></div>
-
-<style>
-	.content
-		:global(
-			:not(a, strong, em, del, span, input, code)
-				+ :not(a, strong, em, del, span, input, code, :where(.not-content *))
-		) {
-		margin-top: 1.5rem;
-	}
-
-	/* Headings after non-headings have more spacing. */
-	.content
-		:global(
-			:not(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *))
-		) {
-		margin-top: 2.5rem;
-	}
-
-	.content :global(li + li:not(:where(.not-content *))),
-	.content :global(dt + dt:not(:where(.not-content *))),
-	.content :global(dt + dd:not(:where(.not-content *))),
-	.content :global(dd + dd:not(:where(.not-content *))) {
-		margin-top: 0.25rem;
-	}
-
-	.content
-		:global(
-			li > :last-child:not(li, ul, ol):not(a, strong, em, del, span, input, :where(.not-content *))
-		) {
-		margin-bottom: 1.25rem;
-	}
-
-	.content :global(dt:not(:where(.not-content *))) {
-		font-weight: 700;
-	}
-	.content :global(dd:not(:where(.not-content *))) {
-		padding-inline-start: 1rem;
-	}
-
-	.content :global(:is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *))) {
-		color: var(--sl-color-white);
-		line-height: var(--sl-line-height-headings);
-		font-weight: 600;
-	}
-
-	.content :global(:is(img, picture, video, canvas, svg, iframe):not(:where(.not-content *))) {
-		display: block;
-		max-width: 100%;
-		height: auto;
-	}
-
-	.content :global(h1:not(:where(.not-content *))) {
-		font-size: var(--sl-text-h1);
-	}
-	.content :global(h2:not(:where(.not-content *))) {
-		font-size: var(--sl-text-h2);
-	}
-	.content :global(h3:not(:where(.not-content *))) {
-		font-size: var(--sl-text-h3);
-	}
-	.content :global(h4:not(:where(.not-content *))) {
-		font-size: var(--sl-text-h4);
-	}
-	.content :global(h5:not(:where(.not-content *))) {
-		font-size: var(--sl-text-h5);
-	}
-	.content :global(h6:not(:where(.not-content *))) {
-		font-size: var(--sl-text-h6);
-	}
-
-	.content :global(a:not(:where(.not-content *))) {
-		color: var(--sl-color-text-accent);
-	}
-	.content :global(a:hover:not(:where(.not-content *))) {
-		color: var(--sl-color-white);
-	}
-
-	.content :global(code:not(:where(.not-content *))) {
-		background-color: var(--sl-color-bg-inline-code);
-		margin-block: -0.125rem;
-		padding: 0.125rem 0.375rem;
-		font-size: var(--sl-text-code-sm);
-	}
-	.content :global(:is(h1, h2, h3, h4, h5, h6) code) {
-		font-size: inherit;
-	}
-
-	.content :global(pre:not(:where(.not-content *))) {
-		border: 1px solid var(--sl-color-gray-5);
-		padding: 0.75rem 1rem;
-		font-size: var(--sl-text-code);
-		tab-size: 2;
-	}
-
-	.content :global(pre code:not(:where(.not-content *))) {
-		all: unset;
-		font-family: var(--__sl-font-mono);
-	}
-
-	.content :global(blockquote:not(:where(.not-content *))) {
-		border-inline-start: 1px solid var(--sl-color-gray-5);
-		padding-inline-start: 1rem;
-	}
-
-	.content :global(table:not(:where(.not-content *))) {
-		display: block;
-		overflow: auto;
-		border-collapse: collapse;
-	}
-	.content :global(tr:nth-child(2n):not(:where(.not-content *))) {
-		background-color: var(--sl-color-gray-7, var(--sl-color-gray-6));
-	}
-	.content :global(:is(th, td):not(:where(.not-content *))) {
-		border: 1px solid var(--sl-color-hairline-light);
-		padding: 0.375rem 0.8125rem;
-	}
-
-	.content :global(hr:not(:where(.not-content *))) {
-		border: 0;
-		border-bottom: 1px solid var(--sl-color-hairline);
-	}
-</style>
+<div class="sl-markdown-content"><slot /></div>
diff --git a/packages/starlight/package.json b/packages/starlight/package.json
index 123de1f4..f2167b14 100644
--- a/packages/starlight/package.json
+++ b/packages/starlight/package.json
@@ -158,7 +158,8 @@
     "./schema": "./schema.ts",
     "./types": "./types.ts",
     "./index.astro": "./index.astro",
-    "./404.astro": "./404.astro"
+    "./404.astro": "./404.astro",
+    "./style/markdown.css": "./style/markdown.css"
   },
   "peerDependencies": {
     "astro": "^3.2.0"
diff --git a/packages/starlight/style/markdown.css b/packages/starlight/style/markdown.css
new file mode 100644
index 00000000..c4f522eb
--- /dev/null
+++ b/packages/starlight/style/markdown.css
@@ -0,0 +1,115 @@
+.sl-markdown-content
+	:not(a, strong, em, del, span, input, code)
+	+ :not(a, strong, em, del, span, input, code, :where(.not-content *)) {
+	margin-top: 1.5rem;
+}
+
+/* Headings after non-headings have more spacing. */
+.sl-markdown-content
+	:not(h1, h2, h3, h4, h5, h6)
+	+ :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
+	margin-top: 2.5rem;
+}
+
+.sl-markdown-content li + li:not(:where(.not-content *)),
+.sl-markdown-content dt + dt:not(:where(.not-content *)),
+.sl-markdown-content dt + dd:not(:where(.not-content *)),
+.sl-markdown-content dd + dd:not(:where(.not-content *)) {
+	margin-top: 0.25rem;
+}
+
+.sl-markdown-content
+	li
+	> :last-child:not(li, ul, ol):not(a, strong, em, del, span, input, :where(.not-content *)) {
+	margin-bottom: 1.25rem;
+}
+
+.sl-markdown-content dt:not(:where(.not-content *)) {
+	font-weight: 700;
+}
+.sl-markdown-content dd:not(:where(.not-content *)) {
+	padding-inline-start: 1rem;
+}
+
+.sl-markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
+	color: var(--sl-color-white);
+	line-height: var(--sl-line-height-headings);
+	font-weight: 600;
+}
+
+.sl-markdown-content :is(img, picture, video, canvas, svg, iframe):not(:where(.not-content *)) {
+	display: block;
+	max-width: 100%;
+	height: auto;
+}
+
+.sl-markdown-content h1:not(:where(.not-content *)) {
+	font-size: var(--sl-text-h1);
+}
+.sl-markdown-content h2:not(:where(.not-content *)) {
+	font-size: var(--sl-text-h2);
+}
+.sl-markdown-content h3:not(:where(.not-content *)) {
+	font-size: var(--sl-text-h3);
+}
+.sl-markdown-content h4:not(:where(.not-content *)) {
+	font-size: var(--sl-text-h4);
+}
+.sl-markdown-content h5:not(:where(.not-content *)) {
+	font-size: var(--sl-text-h5);
+}
+.sl-markdown-content h6:not(:where(.not-content *)) {
+	font-size: var(--sl-text-h6);
+}
+
+.sl-markdown-content a:not(:where(.not-content *)) {
+	color: var(--sl-color-text-accent);
+}
+.sl-markdown-content a:hover:not(:where(.not-content *)) {
+	color: var(--sl-color-white);
+}
+
+.sl-markdown-content code:not(:where(.not-content *)) {
+	background-color: var(--sl-color-bg-inline-code);
+	margin-block: -0.125rem;
+	padding: 0.125rem 0.375rem;
+	font-size: var(--sl-text-code-sm);
+}
+.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) code {
+	font-size: inherit;
+}
+
+.sl-markdown-content pre:not(:where(.not-content *)) {
+	border: 1px solid var(--sl-color-gray-5);
+	padding: 0.75rem 1rem;
+	font-size: var(--sl-text-code);
+	tab-size: 2;
+}
+
+.sl-markdown-content pre code:not(:where(.not-content *)) {
+	all: unset;
+	font-family: var(--__sl-font-mono);
+}
+
+.sl-markdown-content blockquote:not(:where(.not-content *)) {
+	border-inline-start: 1px solid var(--sl-color-gray-5);
+	padding-inline-start: 1rem;
+}
+
+.sl-markdown-content table:not(:where(.not-content *)) {
+	display: block;
+	overflow: auto;
+	border-collapse: collapse;
+}
+.sl-markdown-content tr:nth-child(2n):not(:where(.not-content *)) {
+	background-color: var(--sl-color-gray-7, var(--sl-color-gray-6));
+}
+.sl-markdown-content :is(th, td):not(:where(.not-content *)) {
+	border: 1px solid var(--sl-color-hairline-light);
+	padding: 0.375rem 0.8125rem;
+}
+
+.sl-markdown-content hr:not(:where(.not-content *)) {
+	border: 0;
+	border-bottom: 1px solid var(--sl-color-hairline);
+}