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")
133
133
/** or **/
134
134
require (" prismjs/components/prism-applescript" )
135
135
```
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
+ ```
136
194
137
195
138
196
## Basic Props
You can’t perform that action at this time.
0 commit comments