[docs-infra] Add polish to the inline code block (mui#40260)

mnajdova · Dec 21, 2023 · 5d2efe9 · 5d2efe9
1 parent c9b8879
commit 5d2efe9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/docs/pages/experiments/docs/markdown.md b/docs/pages/experiments/docs/markdown.md
@@ -2,6 +2,12 @@
 
 <p class="description">Markdown.</p>
 
+## Inline code block
+
+Use backticks to add `codeblocks` such as this one.
+
+`Superlongwordwithoutspacessuperlongwordwithoutspacessuperlongwordwithoutspacessuperlongwordwithoutspacessuperlongwordwithoutspacessuperlongwordwithoutspaces`
+
 ## Nested lists
 
 - First item

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -17,7 +17,7 @@ const Root = styled('div')(
     },
     wordBreak: 'break-word',
     '& pre': {
-      lineHeight: 1.5, // Developers likes when the code is dense.
+      lineHeight: 1.5, // Developers like when the code is dense.
       margin: theme.spacing(2, 'auto'),
       padding: theme.spacing(2),
       backgroundColor: '#0F1924', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
@@ -50,15 +50,15 @@ const Root = styled('div')(
     },
     // inline code block
     '& :not(pre) > code': {
-      display: 'inline-block',
-      padding: '0 4px',
+      padding: '2px 4px',
       color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
       backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`,
       border: '1px solid',
       borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
-      borderRadius: 5,
+      borderRadius: 6,
       fontSize: lightTheme.typography.pxToRem(13),
       direction: 'ltr /*! @noflip */',
+      boxDecorationBreak: 'clone',
     },
     '& h1': {
       ...lightTheme.typography.h3,