Skip to content

Commit 12863ac

Browse files
committed
Update README.md
1 parent 9c041df commit 12863ac

File tree

1 file changed

+58
-0
lines changed

1 file changed

+58
-0
lines changed

README.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,64 @@ await import("prismjs/components/prism-applescript")
135135
/** or **/
136136
require("prismjs/components/prism-applescript")
137137
```
138+
#### Next.js
139+
140+
To enable custom languages that can be loaded with client components use the following pattern
141+
142+
```tsx
143+
'use client'
144+
145+
import React, { use } from 'react'
146+
import { Highlight, themes } from 'prism-react-renderer'
147+
148+
const ExtraLanguages = Promise.all([
149+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
150+
// @ts-ignore
151+
import('prismjs/components/prism-python'),
152+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
153+
// @ts-ignore
154+
import('prismjs/components/prism-julia'),
155+
])
156+
157+
const CodeBlock({code, language}) {
158+
use(ExtraLanguages)
159+
160+
return <Highlight
161+
code={code}
162+
language={langauge}
163+
>
164+
{({
165+
className,
166+
style,
167+
tokens,
168+
getLineProps,
169+
getTokenProps,
170+
}): ReactElement => ()
171+
// Your Codeblock code
172+
}
173+
```
174+
175+
Wrap in a `Suspense` layer for best results
176+
177+
```tsx
178+
import { Prism } from 'prism-react-renderer'
179+
import CodeBlock, { CodeBlockProps } from './codeblock'
180+
import { PropsWithChildren, Suspense } from 'react'
181+
182+
;(typeof global !== 'undefined' ? global : window).Prism = Prism
183+
184+
export default async function LoadWrapper(
185+
props: PropsWithChildren<CodeBlockProps>
186+
) {
187+
return (
188+
<>
189+
<Suspense fallback={<div>Loading languages</div>}>
190+
<CodeBlock {...props} />
191+
</Suspense>
192+
</>
193+
)
194+
}
195+
```
138196

139197

140198
## Basic Props

0 commit comments

Comments
 (0)