[Docs Site] Add collapsible plugin to code blocks (#19041)

ec.config.mjs

@@ -5,6 +5,8 @@ import lightTheme from "solarflare-theme/themes/cloudflare-light-color-theme.jso
 import { definePlugin } from "@expressive-code/core";
 import { h } from "@expressive-code/core/hast";
 
+import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";
+
 import lzstring from "lz-string";
 
 /**
@@ -156,6 +158,7 @@ export default {
 		workersPlaygroundButton(),
 		outputCodeblocks(),
 		defaultLanguageTitles(),
+		pluginCollapsibleSections(),
 	],
 	themes: [darkTheme, lightTheme],
 	styleOverrides: {

package.json

@@ -37,6 +37,7 @@
 		"@cloudflare/vitest-pool-workers": "^0.5.40",
 		"@cloudflare/workers-types": "^4.20241218.0",
 		"@codingheads/sticky-header": "^1.0.2",
+		"@expressive-code/plugin-collapsible-sections": "^0.38.3",
 		"@iarna/toml": "^2.2.5",
 		"@iconify-json/material-symbols": "^1.2.12",
 		"@stoplight/json-schema-tree": "^4.0.0",

src/content/docs/style-guide/components/code.mdx

@@ -10,6 +10,15 @@ This is just a small showcase of functionality, it has a lot of options!
 Write-Output "This one has a title!"
 ```
 
+```js collapse={3-5}
+// Collapsing
+const foo = {
+  1: 1,
+  2: 2,
+  3: 3,
+};
+```
+
 ```js wrap
 // Example with wrap
 function getLongString() {