diff --git a/src/mantine-core/src/TypographyStylesProvider/TypographyStylesProvider.story.tsx b/src/mantine-core/src/TypographyStylesProvider/TypographyStylesProvider.story.tsx
new file mode 100644
index 00000000000..6f35d8057f0
--- /dev/null
+++ b/src/mantine-core/src/TypographyStylesProvider/TypographyStylesProvider.story.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { TypographyStylesProvider } from './TypographyStylesProvider';
+
+export default { title: 'TypographyStylesProvider' };
+
+const content = `
+
{
+ "firstName": "John",
+ "lastName": "Smith",
+ "age": 25
+}
+`;
+
+export function CodeBlock() {
+ return (
+
+ );
+}
diff --git a/src/mantine-core/src/TypographyStylesProvider/TypographyStylesProvider.styles.ts b/src/mantine-core/src/TypographyStylesProvider/TypographyStylesProvider.styles.ts
index b24c7d2dbb6..09c0ffab3e7 100644
--- a/src/mantine-core/src/TypographyStylesProvider/TypographyStylesProvider.styles.ts
+++ b/src/mantine-core/src/TypographyStylesProvider/TypographyStylesProvider.styles.ts
@@ -87,6 +87,14 @@ export default createStyles((theme) => {
fontSize: theme.fontSizes.sm,
borderRadius: theme.radius.sm,
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
+
+ '& code': {
+ backgroundColor: 'transparent',
+ padding: 0,
+ borderRadius: 0,
+ color: 'inherit',
+ border: 0,
+ },
},
'& code': {