From 06c56e2d9f42bded52d197020933e47c772430ca Mon Sep 17 00:00:00 2001
From: Kian Newman-Hazel <kian@cloudflare.com>
Date: Tue, 15 Jul 2025 13:14:17 +0100
Subject: [PATCH] [Docs Site] Add EC line numbers plugin

---
 ec.config.mjs                                    |  5 +++++
 package-lock.json                                | 11 +++++++++++
 package.json                                     |  1 +
 src/content/docs/style-guide/components/code.mdx |  6 ++++++
 4 files changed, 23 insertions(+)

diff --git a/ec.config.mjs b/ec.config.mjs
index 106589333a7f1b6..35ff1ff6520da54 100644
--- a/ec.config.mjs
+++ b/ec.config.mjs
@@ -10,6 +10,7 @@ import pluginDefaultTitles from "./src/plugins/expressive-code/default-titles.js
 import pluginGraphqlApiExplorer from "./src/plugins/expressive-code/graphql-api-explorer.js";
 
 import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";
+import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
 
 export default defineEcConfig({
 	plugins: [
@@ -18,7 +19,11 @@ export default defineEcConfig({
 		pluginDefaultTitles(),
 		pluginCollapsibleSections(),
 		pluginGraphqlApiExplorer(),
+		pluginLineNumbers(),
 	],
+	defaultProps: {
+		showLineNumbers: false,
+	},
 	themes: [darkTheme, lightTheme],
 	styleOverrides: {
 		borderWidth: "1px",
diff --git a/package-lock.json b/package-lock.json
index 96d50243abf4560..2c4ac88dfb5e3a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
 				"@cloudflare/workers-types": "4.20250711.0",
 				"@codingheads/sticky-header": "1.0.2",
 				"@expressive-code/plugin-collapsible-sections": "0.41.3",
+				"@expressive-code/plugin-line-numbers": "0.41.3",
 				"@floating-ui/react": "0.27.13",
 				"@iarna/toml": "2.2.5",
 				"@lottiefiles/dotlottie-react": "0.14.2",
@@ -3587,6 +3588,16 @@
 				"@expressive-code/core": "^0.41.2"
 			}
 		},
+		"node_modules/@expressive-code/plugin-line-numbers": {
+			"version": "0.41.3",
+			"resolved": "https://registry.npmjs.org/@expressive-code/plugin-line-numbers/-/plugin-line-numbers-0.41.3.tgz",
+			"integrity": "sha512-eig82a4CRC3XgVPQ2S/TMDcLiHJokOCD/mAdNVImpD3segVewxfjGgtj5DXQRo0E0q6f0R0EH34YzTFl5CEPqg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@expressive-code/core": "^0.41.3"
+			}
+		},
 		"node_modules/@expressive-code/plugin-shiki": {
 			"version": "0.41.2",
 			"resolved": "https://registry.npmjs.org/@expressive-code/plugin-shiki/-/plugin-shiki-0.41.2.tgz",
diff --git a/package.json b/package.json
index aafb9d9da6c0f56..096ed13a6e351dc 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
 		"@cloudflare/workers-types": "4.20250711.0",
 		"@codingheads/sticky-header": "1.0.2",
 		"@expressive-code/plugin-collapsible-sections": "0.41.3",
+		"@expressive-code/plugin-line-numbers": "0.41.3",
 		"@floating-ui/react": "0.27.13",
 		"@iarna/toml": "2.2.5",
 		"@lottiefiles/dotlottie-react": "0.14.2",
diff --git a/src/content/docs/style-guide/components/code.mdx b/src/content/docs/style-guide/components/code.mdx
index 2515d0324cb25d5..43a122e7ee3d5a2 100644
--- a/src/content/docs/style-guide/components/code.mdx
+++ b/src/content/docs/style-guide/components/code.mdx
@@ -21,6 +21,12 @@ const foo = {
 };
 ```
 
+```js showLineNumbers
+// Line numbers
+const foo = "bar";
+const bar = "baz";
+```
+
 ```js wrap
 // Example with wrap
 function getLongString() {