/>
MDX UI
$ init
Diff Block

Diff Block

Code diff viewer — highlights + additions in green and - removals in red

Installation

npx @ravikumarsurya/mdx-ui add diff-block

Usage

Lines starting with + are additions (green), - are removals (red), and lines with a leading space or no prefix are unchanged context.

<DiffBlock title="Rename prop">
  {`- function Button({ onClick }) {
+ function Button({ onPress }) {
-   return <button onClick={onClick}>Click</button>
+   return <button onClick={onPress}>Click</button>
  }`}
</DiffBlock>

Examples

preview.tsx
 export interface PreviewProps {
   code: string
   lang?: string
   children: React.ReactNode
+  highlightedCode?: string
 }
 
-<pre className="overflow-x-auto p-4 text-sm">
-  <code>{code}</code>
-</pre>
+{highlightedCode ? (
+  <div dangerouslySetInnerHTML={{ __html: highlightedCode }} />
+) : (
+  <pre className="overflow-x-auto p-4 text-sm">
+    <code>{code}</code>
+  </pre>
+)}

Migration guide

v1 → v2 migration
- import { Callout } from "mdx-ui"
+ import { Callout } from "@/components/mdx/callout"
 
- <Callout type="warning">
 
 * <Callout variant="warning">

Config change

next.config.ts
 const config = {
-   experimental: { appDir: true },
+   // appDir is stable in Next.js 13.4+, no flag needed
 }

Props

PropTypeDescription
childrenstringDiff content — lines prefixed with +, -, or space
titlestringOptional title bar above the diff
classNamestringExtra classes on the outer <figure>
PreviousDefinition
NextEmphasis