Code blocks

Author: djhi

docs_headless/astro.config.mjs

@@ -4,6 +4,8 @@ import starlight from '@astrojs/starlight';
 import starlightSidebarTopics from 'starlight-sidebar-topics';
 import tailwindcss from '@tailwindcss/vite';
 import mdx from '@astrojs/mdx';
+import rehypeCodeGroup from 'rehype-code-group';
+import expressiveCode from 'astro-expressive-code';
 
 // https://astro.build/config
 export default defineConfig({
@@ -640,9 +642,12 @@ export default defineConfig({
                 Sidebar: './src/components/CustomSidebar.astro',
             },
         }),
+        expressiveCode(),
         mdx(),
     ],
-
+    markdown: {
+        rehypePlugins: [rehypeCodeGroup],
+    },
     vite: {
         plugins: [tailwindcss()],
     },

docs_headless/package.json

@@ -15,6 +15,8 @@
     "@astrojs/starlight-tailwind": "^4.0.1",
     "@tailwindcss/vite": "^4.1.11",
     "astro": "^5.6.1",
+    "astro-expressive-code": "^0.41.3",
+    "rehype-code-group": "^0.2.4",
     "sharp": "^0.34.2",
     "starlight-package-managers": "^0.11.0",
     "starlight-sidebar-topics": "^0.6.0",

docs_headless/src/content/docs/mui/guides/Architecture.md

@@ -17,6 +17,7 @@ To achieve this, react-admin utilizes an internal router, powered by `react-rout
 For example, the following react-admin application:
 
 ```jsx
+// File name: src/App.tsx
 import { CoreAdminContext, CoreAdminUI, Resource, CustomRoutes } from 'ra-core';
 import { Route } from 'react-router-dom';
 
@@ -139,6 +140,7 @@ React-admin avoids components that accept an overwhelming number of props, which
 For example, while you cannot directly pass a list of actions to the `<Edit>` component, you can achieve the same result by passing an `actions` component:
 
 ```jsx
+// File name: src/PostEdit.tsx
 import { Button } from '@mui/material';
 import { TopToolbar, ShowButton } from 'react-admin';
 
@@ -160,8 +162,8 @@ This approach enables you to override specific parts of the logic of a component
 
 The trade-off with this approach is that sometimes react-admin may require you to override several components just to enable one specific feature. For instance, to override the Menu, you must first create a custom layout using your menu as the `<Layout menu>` prop, then pass it as the `<Admin layout>` prop:
 
-```jsx
-// in src/MyLayout.js
+::: code-group labels=[src/MyLayout.tsx, src/App.tsx]
+```tsx
 import { Layout } from 'react-admin';
 import { Menu } from './Menu';
 
@@ -170,8 +172,8 @@ export const MyLayout = ({ children }) => (
         {children}
     </Layout>
 );
-
-// in src/App.js
+```
+```tsx
 import { Admin } from 'react-admin';
 import { MyLayout }  from './MyLayout';
 
@@ -181,6 +183,7 @@ const App = () => (
     </Admin>
 );
 ```
+:::
 
 Although this drawback exists, we accept it because the use of composition in react-admin makes the components highly extensible, and it significantly improves the readability and maintainability of the code.
 

docs_headless/src/styles/global.css

@@ -27,4 +27,8 @@ img.icon {
     display: inline-flex;
     top: 2px;
     position: relative;
+}
+
+.rcg-tab {
+    margin: 0;
 }

yarn.lock

@@ -7493,7 +7493,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"astro-expressive-code@npm:^0.41.1":
+"astro-expressive-code@npm:^0.41.1, astro-expressive-code@npm:^0.41.3":
   version: 0.41.3
   resolution: "astro-expressive-code@npm:0.41.3"
   dependencies:
@@ -12913,7 +12913,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hast-util-to-string@npm:^3.0.0":
+"hast-util-to-string@npm:^3.0.0, hast-util-to-string@npm:~3.0.1":
   version: 3.0.1
   resolution: "hast-util-to-string@npm:3.0.1"
   dependencies:
@@ -19161,8 +19161,10 @@ __metadata:
     "@astrojs/starlight-tailwind": "npm:^4.0.1"
     "@tailwindcss/vite": "npm:^4.1.11"
     astro: "npm:^5.6.1"
+    astro-expressive-code: "npm:^0.41.3"
     prettier: "npm:^3.2.5"
     prettier-plugin-astro: "npm:^0.14.1"
+    rehype-code-group: "npm:^0.2.4"
     sharp: "npm:^0.34.2"
     starlight-package-managers: "npm:^0.11.0"
     starlight-sidebar-topics: "npm:^0.6.0"
@@ -20330,6 +20332,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rehype-code-group@npm:^0.2.4":
+  version: 0.2.4
+  resolution: "rehype-code-group@npm:0.2.4"
+  dependencies:
+    hast-util-to-string: "npm:~3.0.1"
+    rehype: "npm:~13.0.2"
+    unified: "npm:~11.0.5"
+    unist-util-visit: "npm:~5.0.0"
+  peerDependencies:
+    typescript: ">=5.0.4"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 7e0993e3ee961cd4ba392eb1708d45e348e7aee97f42707d0d985df3b40927dc889f1f2de03118a9f9bc06fb38967b17a8c05005a7ab94df280656edd05a3ecc
+  languageName: node
+  linkType: hard
+
 "rehype-expressive-code@npm:^0.41.3":
   version: 0.41.3
   resolution: "rehype-expressive-code@npm:0.41.3"
@@ -20393,7 +20412,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rehype@npm:^13.0.1, rehype@npm:^13.0.2":
+"rehype@npm:^13.0.1, rehype@npm:^13.0.2, rehype@npm:~13.0.2":
   version: 13.0.2
   resolution: "rehype@npm:13.0.2"
   dependencies:
@@ -23046,7 +23065,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unified@npm:^11.0.0, unified@npm:^11.0.4, unified@npm:^11.0.5":
+"unified@npm:^11.0.0, unified@npm:^11.0.4, unified@npm:^11.0.5, unified@npm:~11.0.5":
   version: 11.0.5
   resolution: "unified@npm:11.0.5"
   dependencies:
@@ -23193,7 +23212,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-util-visit@npm:^5.0.0":
+"unist-util-visit@npm:^5.0.0, unist-util-visit@npm:~5.0.0":
   version: 5.0.0
   resolution: "unist-util-visit@npm:5.0.0"
   dependencies: