[FEATURE] demo/wrapper with frameworks

[matubu]

Add demo and documention on how to use speed-highlight JS with frameworks

• [ ] svelte
• [ ] angular
• [ ] react
• [ ] vue

[gummikonsumer]

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?