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 = `
+<pre><code>{
+  "firstName": "John",
+  "lastName": "Smith",
+  "age": 25
+}</code></pre>
+`;
+
+export function CodeBlock() {
+  return (
+    <div style={{ padding: 40 }}>
+      <TypographyStylesProvider>
+        <div dangerouslySetInnerHTML={{ __html: content }} />
+      </TypographyStylesProvider>
+    </div>
+  );
+}
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': {