diff --git a/README.md b/README.md index 6a38fc8..18836e3 100644 --- a/README.md +++ b/README.md @@ -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) @@ -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) + + return + {({ + 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 + +export default async function LoadWrapper( + props: PropsWithChildren +) { + return ( + <> + Loading languages}> + + + + ) +} +``` ## Basic Props