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

Conversation

kochie
Copy link

@kochie kochie commented Apr 30, 2023

No description provided.

@TheMikeyRoss
Copy link

Any update on this one?

@kochie
Copy link
Author

kochie commented Oct 11, 2023

Legit forgot about this. @gksander anything I can do to close this out?

edit: I've just fixed the merge conflict.

])

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?

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.

Choose a reason for hiding this comment

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

Using suspense makes the component client-only though, it means built-in languages will be rendered server-side, but extra languages will need JS on the client to work.

Personally I would like this library to work completely on the server, like Bright does.

Copy link

@FezVrasta FezVrasta Jan 22, 2025

Choose a reason for hiding this comment

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

Also, this should be called on the client side component along the server one.

import('prismjs/components/prism-julia'),
])

const CodeBlock({code, language}) {
Copy link

@FezVrasta FezVrasta Jan 21, 2025

Choose a reason for hiding this comment

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

Suggested change
const CodeBlock({code, language}) {
const CodeBlock = ({code, language}) => {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants