test-render.tsx

import ReactMarkdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'
import remarkGfm from 'remark-gfm'
import { renderToStaticMarkup } from 'react-dom/server'

const md = `<div align="center">

<!-- Organization Logo -->
<img src="https://raw.githubusercontent.com/dynamicdev-jamesdynamicdev/dynamicdev-jamesdynamicdev/main/dynamicdev.png" width="240" alt="dynamicdev_ logo">

<!-- Typing Animation -->
<a href="https://git.io/typing-svg"><img src="https://readme-typing-svg.demolab.com?font=Fira+Code&weight=600&size=26&duration=3000&pause=1000&color=B03A2E&center=true&vCenter=true&width=820&lines=👋+WatchDocs+%E2%80%94+Engineer+Workspace;Automation+%E2%80%A2+Preview+%E2%80%A2+Notes+%E2%80%A2+Diagram;Site+Survey+Tooling+for+Network+%26+CCTV" alt="WatchDocs banner"/></a>

</div>`

const html = renderToStaticMarkup(
  <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
    {md}
  </ReactMarkdown>
)
console.log(html)