UI: Fix inline code issues

.changeset/free-onions-learn.md

@@ -0,0 +1,6 @@
+---
+'fumadocs-twoslash': patch
+'fumadocs-ui': patch
+---
+
+Fix inline code issues

apps/docs/content/docs/ui/mdx/codeblock.mdx

@@ -1,6 +1,6 @@
 ---
 title: Code Block
-description: Adding code blocks to your docs
+description: Displaying Shiki highlighted code blocks
 ---
 
 <Wrapper>
@@ -24,11 +24,15 @@ export default withMDX(config);
 </div>
 </Wrapper>
 
-Display code blocks, added by default.
+This is a MDX component to be used with [Rehype Code](/docs/headless/mdx/rehype-code) to display highlighted codeblocks.
+
+Supported features:
 
 - Copy button
 - Custom titles and icons
 
+> If you're looking for an equivalent with runtime syntax highlighting, see [Dynamic Code Block](/docs/ui/components/dynamic-codeblock).
+
 ## Usage
 
 Wrap the pre element in `<CodeBlock />`, which acts as the wrapper of code block.
@@ -36,6 +40,7 @@ Wrap the pre element in `<CodeBlock />`, which acts as the wrapper of code block
 ```tsx title="mdx-components.tsx"
 import defaultComponents from 'fumadocs-ui/mdx';
 import type { MDXComponents } from 'mdx/types';
+import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock';
 
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
   return {
@@ -55,7 +60,7 @@ See [Markdown](/docs/ui/markdown#codeblock) for usages.
 
 ### Keep Background
 
-Use the background color generated by Shiki (the Rehype Code plugin).
+Use the background color generated by Shiki.
 
 ```tsx
 import { Pre, CodeBlock } from 'fumadocs-ui/components/codeblock';

packages/twoslash/src/index.ts

@@ -86,7 +86,7 @@ export function transformerTwoslash({
       },
       popupTypes: {
         tagName: 'div',
-        class: 'fd-codeblock prose-no-margin',
+        class: 'twoslash fd-codeblock prose-no-margin',
         children: (v) => {
           if (
             v.length === 1 &&

packages/ui/css/shiki.css

@@ -1,8 +1,8 @@
-.fd-codeblock code span {
+.shiki code span {
   color: var(--shiki-light);
 }
 
-.dark .fd-codeblock code span {
+.dark .shiki code span {
   color: var(--shiki-dark);
 }
 
@@ -11,37 +11,37 @@
   font-size: 13px;
 }
 
-.fd-codeblock code .diff.remove {
+.shiki code .diff.remove {
   background-color: var(--fd-diff-remove-color);
   opacity: 0.7;
 }
 
-.fd-codeblock code .diff::before {
+.shiki code .diff::before {
   position: absolute;
   left: 6px;
 }
 
-.fd-codeblock code .diff.remove::before {
+.shiki code .diff.remove::before {
   content: '-';
   color: var(--fd-diff-remove-symbol-color);
 }
 
-.fd-codeblock code .diff.add {
+.shiki code .diff.add {
   background-color: var(--fd-diff-add-color);
 }
 
-.fd-codeblock code .diff.add::before {
+.shiki code .diff.add::before {
   content: '+';
   color: var(--fd-diff-add-symbol-color);
 }
 
-.fd-codeblock code .diff {
+.shiki code .diff {
   margin: 0 -16px;
   padding: 0 16px;
   position: relative;
 }
 
-.fd-codeblock .highlighted {
+.shiki .highlighted {
   margin: 0 -16px;
   padding: 0 16px;
   background-color: color-mix(
@@ -51,7 +51,7 @@
   );
 }
 
-.fd-codeblock .highlighted-word {
+.shiki .highlighted-word {
   padding: 1px 2px;
   margin: -1px -3px;
   border: 1px solid