We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
Add demo and documention on how to use speed-highlight JS with frameworks
The text was updated successfully, but these errors were encountered:
I have been using this for react:
'use client' import { highlightElement } from '@speed-highlight/core' import { detectLanguage } from '@speed-highlight/core/detect' import { useEffect, useRef } from 'react' export default function Code ({ children, language, theme = 'default', ...props }) { const r = useRef() useEffect(() => { if (r.current) { highlightElement(r.current, language || detectLanguage(children)) } }, [r.current]) return ( <> <link rel='stylesheet' href={`https://cdn.jsdelivr.net/gh/speed-highlight/core/dist/themes/${theme}.css`} /> <pre ref={r} {...props}>{children}</pre> </> ) } // example usage <Code theme='dark'>{JSON.stringify(experiment, null, 2)}</Code>
the use client part makes it work in next's new app-router. Is there a better way to do theme?
use client
Sorry, something went wrong.
No branches or pull requests
Add demo and documention on how to use speed-highlight JS with frameworks
The text was updated successfully, but these errors were encountered: