UI: Support disabling codeblock styles with .not-fumadocs-codeblock

.changeset/ten-pants-grab.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Support disabling codeblock styles with `.not-fumadocs-codeblock`

apps/docs/content/docs/ui/(integrations)/openapi/configurations.mdx

@@ -176,7 +176,11 @@ The server to render pages.
 
 ### Generate Code Samples
 
-Generate custom code samples for each API endpoint.
+Generate custom code samples for each API endpoint. Make sure to install the types package to give you type-safety when customising it:
+
+```package-install
+openapi-types -D
+```
 
 ```ts
 import { createOpenAPI } from 'fumadocs-openapi/server';

packages/openapi/src/types.ts

@@ -73,9 +73,7 @@ export interface RenderContext {
   /**
    * Generate code samples for endpoint.
    */
-  generateCodeSamples?: (
-    method: NoReference<MethodInformation>,
-  ) => Awaitable<CodeSample[]>;
+  generateCodeSamples?: (method: MethodInformation) => Awaitable<CodeSample[]>;
 
   shikiOptions?: Omit<CodeToHastOptionsCommon, 'lang'> &
     CodeOptionsThemes<BuiltinTheme>;

packages/ui/css/shiki.css

@@ -1,65 +1,69 @@
-.shiki code span {
-  color: var(--shiki-light);
-}
-
-.dark .shiki code span {
-  color: var(--shiki-dark);
-}
-
 .fd-codeblock pre > * {
   display: grid;
   font-size: 13px;
 }
 
-.shiki code .diff.remove {
-  background-color: var(--fd-diff-remove-color);
-  opacity: 0.7;
+.shiki:not(.not-fumadocs-codeblock *) {
+  code span {
+    color: var(--shiki-light);
+  }
+
+  code .diff.remove {
+    background-color: var(--fd-diff-remove-color);
+    opacity: 0.7;
+  }
+
+  code .diff::before {
+    position: absolute;
+    left: 6px;
+  }
+
+  code .diff.remove::before {
+    content: '-';
+    color: var(--fd-diff-remove-symbol-color);
+  }
+
+  code .diff.add {
+    background-color: var(--fd-diff-add-color);
+  }
+
+  code .diff.add::before {
+    content: '+';
+    color: var(--fd-diff-add-symbol-color);
+  }
+
+  code .diff {
+    margin: 0 -16px;
+    padding: 0 16px;
+    position: relative;
+  }
+
+  .highlighted {
+    margin: 0 -16px;
+    padding: 0 16px;
+    background-color: color-mix(
+      in oklab,
+      var(--color-fd-primary) 10%,
+      transparent
+    );
+  }
+
+  .highlighted-word {
+    padding: 1px 2px;
+    margin: -1px -3px;
+    border: 1px solid
+      color-mix(in oklab, var(--color-fd-primary) 50%, transparent);
+    background-color: color-mix(
+      in oklab,
+      var(--color-fd-primary) 10%,
+      transparent
+    );
+    border-radius: 2px;
+  }
 }
 
-.shiki code .diff::before {
-  position: absolute;
-  left: 6px;
-}
-
-.shiki code .diff.remove::before {
-  content: '-';
-  color: var(--fd-diff-remove-symbol-color);
-}
-
-.shiki code .diff.add {
-  background-color: var(--fd-diff-add-color);
-}
-
-.shiki code .diff.add::before {
-  content: '+';
-  color: var(--fd-diff-add-symbol-color);
-}
-
-.shiki code .diff {
-  margin: 0 -16px;
-  padding: 0 16px;
-  position: relative;
-}
-
-.shiki .highlighted {
-  margin: 0 -16px;
-  padding: 0 16px;
-  background-color: color-mix(
-    in oklab,
-    var(--color-fd-primary) 10%,
-    transparent
-  );
-}
-
-.shiki .highlighted-word {
-  padding: 1px 2px;
-  margin: -1px -3px;
-  border: 1px solid
-    color-mix(in oklab, var(--color-fd-primary) 50%, transparent);
-  background-color: color-mix(
-    in oklab,
-    var(--color-fd-primary) 10%,
-    transparent
-  );
-  border-radius: 2px;
+.dark .shiki:not(.not-fumadocs-codeblock *) {
+  code span {
+    color: var(--shiki-dark);
+  }
 }