Open matubu opened 2 years ago
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?
Add demo and documention on how to use speed-highlight JS with frameworks