Skip to content

Commit 9c46ccf

Browse files
authored
Update README.md
1 parent d6c0605 commit 9c46ccf

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

137195

138196
## Basic Props

0 commit comments

Comments
 (0)