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 @@ -133,6 +133,64 @@ await import("prismjs/components/prism-applescript")
133133/** or **/
134134require (" 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
You can’t perform that action at this time.
0 commit comments