From d81d3d099343fd297d2ac85593f0dc261c9f59a2 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 18 Sep 2024 18:25:48 +0200
Subject: [PATCH] [docs] Format Pigment CSS docs

---
 .../pigment-css/pigment-css.md                | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/docs/data/material/experimental-api/pigment-css/pigment-css.md b/docs/data/material/experimental-api/pigment-css/pigment-css.md
index cdb267656b2ba2..b2afee78bcb0ee 100644
--- a/docs/data/material/experimental-api/pigment-css/pigment-css.md
+++ b/docs/data/material/experimental-api/pigment-css/pigment-css.md
@@ -287,7 +287,6 @@ Pigment CSS uses the `prefers-color-scheme` media query by default to switch be
 ```js
 const colorScheme = css`
   background-color: ${({ theme }) => theme.colorSchemes.dark.colors.background};
-
   color: ${({ theme }) => theme.colorSchemes.dark.colors.foreground};
 
   @media (prefers-color-scheme: light) {
@@ -299,14 +298,14 @@ const colorScheme = css`
 
 You can also customize the behavior by providing a `getSelector` function:
 
-```js
-  extendTheme({
-    colorSchemes: {
-      light: { ... },
-      dark: { ... },
-    },
-+   getSelector: (colorScheme) => colorScheme ? `.theme-${colorScheme}` : ':root',
-  });
+```diff
+ extendTheme({
+   colorSchemes: {
+     light: { ... },
+     dark: { ... },
+   },
++  getSelector: (colorScheme) => colorScheme ? `.theme-${colorScheme}` : ':root',
+ });
 ```
 
 ### The sx prop
@@ -324,7 +323,7 @@ The `sx` prop works with all Material UI components as well as HTML elements an
 
 If you use the `sx` prop on an HTML element, you'll need to augment the `HTMLAttributes` interface:
 
-```js
+```ts
 type Theme = {
   // your theme type
 };
@@ -335,7 +334,9 @@ declare global {
       sx?:
         | React.CSSProperties
         | ((theme: Theme) => React.CSSProperties)
-        | ReadonlyArray<React.CSSProperties | ((theme: Theme) => React.CSSProperties)>;
+        | ReadonlyArray<
+            React.CSSProperties | ((theme: Theme) => React.CSSProperties)
+          >;
     }
   }
 }