Next.js + Highlight.js にて jsx と tsx の html 部分をハイライトさせる

環境

Next.js v15
React v19
TypeScript v5
Highlight.js v11

Highlight.js とは

Highlight.js is a syntax highlighter written in JavaScript

技術ブログでよく見かける、
プログラミングコードに色ついてるやつ。

HTML 部分がハイライトされない

以下のサンプルコードでは HTML 部分がハイライトされなかった。

import styles from "./styles.module.scss"
import hljs from "highlight.js/lib/core"

import javascript from "highlight.js/lib/languages/javascript"
import typescript from "highlight.js/lib/languages/typescript"

import "highlight.js/styles/monokai.css"

type Props = {
	lang: string
	name?: string
	value: string
}

export default function Code({ lang, name, value }: Props) {

	hljs.registerLanguage("javascript", javascript)
	hljs.registerLanguage("typescript", typescript)

	const str = name ? `\n\n${value}` : value
	const highlightedCode = hljs.highlight(str, { language: lang }).value

	return (
		<div className={styles.code}>
			{name && <div className={styles.name}>{name}</div>}
			<pre>
				<code className={`hljs`} dangerouslySetInnerHTML={{ __html: highlightedCode }}></code>
			</pre>
		</div>
	)
}

React JSX support? #494 - Github

によると、
xml を追加するとハイライトされるらしい。

import styles from "./styles.module.scss"
import hljs from "highlight.js/lib/core"

import javascript from "highlight.js/lib/languages/javascript"
import typescript from "highlight.js/lib/languages/typescript"
import xml from "highlight.js/lib/languages/xml"

import "highlight.js/styles/monokai.css"

type Props = {
	lang: string
	name?: string
	value: string
}

export default function Code({ lang, name, value }: Props) {

	hljs.registerLanguage("javascript", javascript)
	hljs.registerLanguage("typescript", typescript)
	hljs.registerLanguage("xml", xml)

	const str = name ? `\n\n${value}` : value
	const highlightedCode = hljs.highlight(str, { language: lang }).value

	return (
		<div className={styles.code}>
			{name && <div className={styles.name}>{name}</div>}
			<pre>
				<code className={`hljs`} dangerouslySetInnerHTML={{ __html: highlightedCode }}></code>
			</pre>
		</div>
	)
}