Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds instructions for using custom langauges with Next.js #202

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 61 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,9 @@ _(If you just want to use your Prism CSS-file themes, that's also no problem)_


- [Installation](#installation)
- [Usage](#usage)
- [Custom Language Support](#custom-language-support)
- [Usage](#usage)
- [Custom Language Support](#custom-language-support)
- [Next.js](#nextjs)
- [Basic Props](#basic-props)
- [children](#children)
- [language](#language)
Expand Down Expand Up @@ -135,6 +136,64 @@ await import("prismjs/components/prism-applescript")
/** or **/
require("prismjs/components/prism-applescript")
```
#### Next.js

To enable custom languages that can be loaded with client components use the following pattern

```tsx
'use client'

import React, { use } from 'react'
import { Highlight, themes } from 'prism-react-renderer'

const ExtraLanguages = Promise.all([
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import('prismjs/components/prism-python'),
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import('prismjs/components/prism-julia'),
])

const CodeBlock({code, language}) {
use(ExtraLanguages)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is use a generally available function yet, or still in canary?


return <Highlight
code={code}
language={langauge}
>
{({
className,
style,
tokens,
getLineProps,
getTokenProps,
}): ReactElement => ()
// Your Codeblock code
}
```

Wrap in a `Suspense` layer for best results

```tsx
import { Prism } from 'prism-react-renderer'
import CodeBlock, { CodeBlockProps } from './codeblock'
import { PropsWithChildren, Suspense } from 'react'

;(typeof global !== 'undefined' ? global : window).Prism = Prism
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the idea of using suspense, but placing Prism in the globals might be counter to what we are trying to do in this library, which is avoid polluting the global namespace.


export default async function LoadWrapper(
props: PropsWithChildren<CodeBlockProps>
) {
return (
<>
<Suspense fallback={<div>Loading languages</div>}>
<CodeBlock {...props} />
</Suspense>
</>
)
}
```


## Basic Props
Expand Down