File tree Expand file tree Collapse file tree 1 file changed +58
-0
lines changed Expand file tree Collapse file tree 1 file changed +58
-0
lines changed Original file line number Diff line number Diff line change @@ -135,6 +135,64 @@ await import("prismjs/components/prism-applescript")
135135/** or **/
136136require (" 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
You can’t perform that action at this time.
0 commit comments