diff --git a/.changeset/spotty-radios-tickle.md b/.changeset/spotty-radios-tickle.md
new file mode 100644
index 000000000..69740366f
--- /dev/null
+++ b/.changeset/spotty-radios-tickle.md
@@ -0,0 +1,18 @@
+---
+'renoun': minor
+---
+
+Exports the `parsePreProps` utility for the `CodeBlock` component instead of attaching it to the component itself:
+
+```tsx
+import { CodeBlock, parsePreProps } from 'renoun/components'
+import type { MDXComponents } from 'renoun/mdx'
+
+export function useMDXComponents() {
+ return {
+ pre: (props) => {
+ return
+ },
+ } satisfies MDXComponents
+}
+```
diff --git a/apps/site/components/MDXComponents.tsx b/apps/site/components/MDXComponents.tsx
index 9f123d9ba..a01adf612 100644
--- a/apps/site/components/MDXComponents.tsx
+++ b/apps/site/components/MDXComponents.tsx
@@ -3,6 +3,7 @@ import {
CodeInline,
PackageInstall,
parseCodeProps,
+ parsePreProps,
} from 'renoun/components'
import type { MDXComponents as MDXComponentsType } from 'renoun/mdx'
import { GeistMono } from 'geist/font/mono'
@@ -91,11 +92,9 @@ export const MDXComponents = {
)
},
code: (props) => {
- const { value, language } = parseCodeProps(props)
return (
{
- const parsedProps = RenounCodeBlock.parsePreProps(props)
- return
+ return
},
} satisfies MDXComponentsType
diff --git a/apps/site/guides/02.next.mdx b/apps/site/guides/02.next.mdx
index d583d05a1..721972fbe 100644
--- a/apps/site/guides/02.next.mdx
+++ b/apps/site/guides/02.next.mdx
@@ -121,13 +121,18 @@ export default withMDX({
Use the `CodeBlock` and `CodeInline` components to override the `pre` and `code` components respectively in your project's `mdx-components.tsx` file:
```tsx filename="02.mdx-components.tsx"
-import { CodeBlock, CodeInline, parseCodeProps } from 'renoun/components'
+import {
+ CodeBlock,
+ CodeInline,
+ parsePreProps,
+ parseCodeProps,
+} from 'renoun/components'
import type { MDXComponents } from 'renoun/mdx'
export function useMDXComponents() {
return {
pre: (props) => {
- return
+ return
},
code: (props) => {
return
diff --git a/examples/blog/mdx-components.tsx b/examples/blog/mdx-components.tsx
index 0ef05b3c2..35891aed2 100644
--- a/examples/blog/mdx-components.tsx
+++ b/examples/blog/mdx-components.tsx
@@ -1,14 +1,18 @@
-import { CodeBlock, CodeInline, parseCodeProps } from 'renoun/components'
+import {
+ CodeBlock,
+ CodeInline,
+ parsePreProps,
+ parseCodeProps,
+} from 'renoun/components'
import type { MDXComponents } from 'renoun/mdx'
export function useMDXComponents() {
return {
+ pre: (props) => {
+ return
+ },
code: (props) => {
return
},
- pre: (props) => {
- const { value, language } = CodeBlock.parsePreProps(props)
- return
- },
} satisfies MDXComponents
}
diff --git a/examples/design-system/mdx-components.tsx b/examples/design-system/mdx-components.tsx
index 3db5728e3..35891aed2 100644
--- a/examples/design-system/mdx-components.tsx
+++ b/examples/design-system/mdx-components.tsx
@@ -1,13 +1,18 @@
-import { CodeBlock, CodeInline, parseCodeProps } from 'renoun/components'
+import {
+ CodeBlock,
+ CodeInline,
+ parsePreProps,
+ parseCodeProps,
+} from 'renoun/components'
import type { MDXComponents } from 'renoun/mdx'
export function useMDXComponents() {
return {
+ pre: (props) => {
+ return
+ },
code: (props) => {
return
},
- pre: (props) => {
- return
- },
} satisfies MDXComponents
}
diff --git a/packages/renoun/src/components/APIReference.tsx b/packages/renoun/src/components/APIReference.tsx
index 27a68890a..a6e1649c4 100644
--- a/packages/renoun/src/components/APIReference.tsx
+++ b/packages/renoun/src/components/APIReference.tsx
@@ -16,14 +16,14 @@ import type {
TypeOfKind,
} from '../utils/resolve-type.js'
import { isParameterType, isPropertyType } from '../utils/resolve-type.js'
-import { CodeBlock } from './CodeBlock/index.js'
+import { CodeBlock, parsePreProps } from './CodeBlock/index.js'
import { CodeInline } from './CodeInline.js'
import { MDXRenderer } from './MDXRenderer.js'
import type { MDXComponents } from '../mdx/index.js'
const mdxComponents = {
pre: (props) => {
- return
+ return
},
code: (props) => {
return
diff --git a/packages/renoun/src/components/CodeBlock/CodeBlock.tsx b/packages/renoun/src/components/CodeBlock/CodeBlock.tsx
index 4bbb0b37c..a8b021e9b 100644
--- a/packages/renoun/src/components/CodeBlock/CodeBlock.tsx
+++ b/packages/renoun/src/components/CodeBlock/CodeBlock.tsx
@@ -465,10 +465,10 @@ const languageKey = 'language-'
const languageLength = languageKey.length
/** Parses the props of an MDX `pre` element for passing to `CodeBlock`. */
-CodeBlock.parsePreProps = ({
+export function parsePreProps({
children,
...props
-}: React.ComponentProps>) => {
+}: React.ComponentProps>) {
const code = children as React.ReactElement<{
className: `language-${string}`
children: string
diff --git a/packages/renoun/src/components/CodeBlock/index.ts b/packages/renoun/src/components/CodeBlock/index.ts
index 039c5acf1..470adb3fa 100644
--- a/packages/renoun/src/components/CodeBlock/index.ts
+++ b/packages/renoun/src/components/CodeBlock/index.ts
@@ -1,5 +1,6 @@
export {
CodeBlock,
+ parsePreProps,
type BaseCodeBlockProps,
type CodeBlockProps,
} from './CodeBlock.js'
diff --git a/packages/renoun/src/components/index.ts b/packages/renoun/src/components/index.ts
index 5fd1c3bff..79adf0b96 100644
--- a/packages/renoun/src/components/index.ts
+++ b/packages/renoun/src/components/index.ts
@@ -5,12 +5,17 @@ export {
LineNumbers,
Tokens,
Toolbar,
+ parsePreProps,
type BaseCodeBlockProps,
type CodeBlockProps,
type TokensProps,
type ToolbarProps,
} from './CodeBlock/index.js'
-export { CodeInline, type CodeInlineProps } from './CodeInline.js'
+export {
+ CodeInline,
+ parseCodeProps,
+ type CodeInlineProps,
+} from './CodeInline.js'
export { Copyright } from './Copyright.js'
export { GitProviderLogo, GitProviderLink } from './GitProvider.js'
export { MDXRenderer } from './MDXRenderer.js'
diff --git a/packages/renoun/src/file-system/index.tsx b/packages/renoun/src/file-system/index.tsx
index 3e6dfe0ce..d31b1b15a 100644
--- a/packages/renoun/src/file-system/index.tsx
+++ b/packages/renoun/src/file-system/index.tsx
@@ -3,7 +3,7 @@ import type { MDXContent } from '@renoun/mdx'
import { rehypePlugins, remarkPlugins } from '@renoun/mdx'
import { minimatch } from 'minimatch'
-import { CodeBlock } from '../components/CodeBlock/index.js'
+import { CodeBlock, parsePreProps } from '../components/CodeBlock/index.js'
import { CodeInline } from '../components/CodeInline.js'
import { MDXRenderer } from '../components/MDXRenderer.js'
import type { MDXComponents } from '../mdx/index.js'
@@ -46,7 +46,7 @@ export { Repository } from './Repository.js'
const mdxComponents = {
pre: (props) => {
- return
+ return
},
code: (props) => {
return