website/components/Markdown.tsx

import { SignalLike } from '$fresh/src/types.ts'
import { render, RenderOptions } from 'gfm'

export type MarkdownTheme = 'light' | 'dark' | 'auto'
export function Markdown(
	{ children, theme, options }: {
		children?: SignalLike<string> | string
		theme?: SignalLike<MarkdownTheme> | MarkdownTheme
		options?: RenderOptions
	},
) {
	return (
		<div
			class='markdown-body'
			data-color-mode={typeof theme === 'string'
				? theme
				: theme?.value ?? 'auto'}
			data-light-theme='light'
			data-dark-theme='dark'
			dangerouslySetInnerHTML={{
				__html: render(
					typeof children === 'string' ? children : children?.value ?? '',
					options,
				),
			}}
		>
		</div>
	)
}