emdash-cms · khoinguyenpham04 · Aug 21, 2026 · Aug 21, 2026 · Aug 21, 2026 · Aug 22, 2026
diff --git a/.changeset/bright-code-blocks.md b/.changeset/bright-code-blocks.md
@@ -0,0 +1,6 @@
+---
+"@emdash-cms/admin": patch
+"emdash": patch
+---
+
+Fixes code blocks in the admin and inline visual editors so supported languages are syntax-highlighted on borderless light and dark surfaces.
diff --git a/.changeset/gentle-code-block-controls.md b/.changeset/gentle-code-block-controls.md
@@ -0,0 +1,6 @@
+---
+"@emdash-cms/admin": patch
+"emdash": patch
+---
+
+Adds matching code-block controls to the admin and inline visual editors for selecting a language and copying code.
diff --git a/docs/src/content/docs/guides/querying-content.mdx b/docs/src/content/docs/guides/querying-content.mdx
@@ -257,6 +257,58 @@ In edit mode, `{...entry.edit.title}` produces a `data-emdash-ref` attribute tha
 	injects a TipTap editor. For image fields, it opens a media library popover.
 </Aside>
 
+### Styling inline code blocks
+
+Code blocks in the inline editor follow the system appearance by default. If your site has its own theme switch, set these properties under its light and dark selectors:
+
+| Property | Controls |
+| --- | --- |
+| `--emdash-inline-code-background` | Code-block surface |
+| `--emdash-inline-code-foreground` | Untokenized code |
+| `--emdash-inline-code-muted` | Comments and quotes |
+| `--emdash-inline-code-keyword` | Keywords, literals, selectors, and deletions |
+| `--emdash-inline-code-string` | Strings, attributes, symbols, and additions |
+| `--emdash-inline-code-number` | Numbers and metadata |
+| `--emdash-inline-code-title` | Titles, names, types, and built-ins |
+| `--emdash-inline-code-border` | Language-control borders |
+| `--emdash-inline-code-control-background` | Language-control surface |
+| `--emdash-inline-code-control-foreground` | Language-control text and icons |
+| `--emdash-inline-code-focus` | Keyboard focus indicator |
+
+The following example matches inline code blocks to a site that applies `.dark` to the `<html>` element:
+
+```css title="src/styles/global.css"
+:root {
+  --emdash-inline-code-background: #f7f7f5;
+  --emdash-inline-code-foreground: #24292f;
+  --emdash-inline-code-muted: #57606a;
+  --emdash-inline-code-keyword: #b8172a;
+  --emdash-inline-code-string: #0a3069;
+  --emdash-inline-code-number: #0550ae;
+  --emdash-inline-code-title: #7545c7;
+  --emdash-inline-code-border: #7d8590;
+  --emdash-inline-code-control-background: #fff;
+  --emdash-inline-code-control-foreground: #24292f;
+  --emdash-inline-code-focus: #0550ae;
+}
+
+:root.dark {
+  --emdash-inline-code-background: #202020;
+  --emdash-inline-code-foreground: #f0f3f6;
+  --emdash-inline-code-muted: #c9d1d9;
+  --emdash-inline-code-keyword: #ffc1bb;
+  --emdash-inline-code-string: #b9ddff;
+  --emdash-inline-code-number: #a8d5ff;
+  --emdash-inline-code-title: #e5ccff;
+  --emdash-inline-code-border: #6e7681;
+  --emdash-inline-code-control-background: #161b22;
+  --emdash-inline-code-control-foreground: #f0f3f6;
+  --emdash-inline-code-focus: #a8d5ff;
+}
+```
+
+Override the complete foreground palette when changing the background so every token remains readable. These properties style only the hydrated inline editor; style rendered site code blocks through your site's normal CSS.
+
 ## Sorting Results
 
 `getEmDashCollection` does not guarantee sort order. Sort results in your template:

diff --git a/docs/technical-specs/issue-2361-code-block-highlighting.md b/docs/technical-specs/issue-2361-code-block-highlighting.md
diff --git a/e2e/global-setup.ts b/e2e/global-setup.ts
@@ -257,6 +257,31 @@ async function seedTestData(
 	await apiPost(baseUrl, token, `/_emdash/api/content/posts/${imagePostId}/publish`, {});
 	postIds.push(imagePostId);
 
+	const codePost = await apiPost(baseUrl, token, "/_emdash/api/content/posts", {
+		data: {
+			title: "Post With Code",
+			excerpt: "A post containing supported and unsupported code blocks",
+			body: [
+				{
+					_type: "code",
+					_key: "code-js",
+					code: 'const greeting = "hello";\nconsole.log(greeting);',
+					language: "javascript",
+				},
+				{
+					_type: "code",
+					_key: "code-astro",
+					code: '---\nconst title = "Hello";\n---\n<h1>{title}</h1>',
+					language: "astro",
+				},
+			],
+		},
+		slug: "post-with-code",
+	});
+	const codePostId = codePost.item?.id ?? codePost.id;
+	await apiPost(baseUrl, token, `/_emdash/api/content/posts/${codePostId}/publish`, {});
+	postIds.push(codePostId);
+
 	return {
 		collections,
 		contentIds: { posts: postIds, pages: pageIds },