CodexRenderer.js

// CodexRenderer can render classes (default), attributes,
// or components.
<CodexRenderer
	render={{
		h1: "font-semibold text-3xl leading-tight text-black antialiased",
		h2: "font-semibold text-2xl leading-tight text-black antialiased",
		h3: "font-semibold text-xl  leading-tight text-black antialiased",
		h4: "font-semibold text-xl  leading-tight text-black antialiased",
		h5: "font-semibold text-xl  leading-tight text-black antialiased",
		h6: "font-semibold text-xl  leading-tight text-black antialiased",
		p: "",
		blockquote: { className: "px-6 text-gray-600", style: { boxShadow: "inset 0.25em 0 var(--gray-300)" } },
		// pre: "px-6 font-mono text-sm leading-snug bg-white shadow-hero rounded",
		pre: ({
			language,
			children: unhighlighted,
		}) => {
			const [highlighted, setHighlighted] = React.useState(null)

			React.useEffect(() => {
				setHighlighted(window.Prism.highlight(unhighlighted, window.Prism.languages[language], language))
			}, [language, unhighlighted])

			return (
				<pre className={!highlighted ? `language-none` : `language-${language}`}>
					<code dangerouslySetInnerHTML={{
						__html: highlighted || unhighlighted,
					}} />
				</pre>
			)
		},
		ul: "ml-5",
		ol: "ml-5",
		li: "my-2",
		hr: "",

		emoji: { style: { verticalAlign: "-10%", fontSize: "120%", lineHeight: 1 } },
		em: "italic",
		strong: "font-semibold",
		code: "px-1 py-px font-mono text-sm text-red-600 bg-red-100 rounded",
		strike: "line-through text-gray-500",
		a: { className: "underline text-md-blue-a400", target: "_blank", rel: "noopener noreferrer" },
	}}
/>