Fixes rendering of HTML comments inside markdown code blocks (#3638)

* JS comment wrappers should be removed from HTML comments in code blocks

* chore: add changeset

2 files changed, 19 insertions, 1 deletions

diff --git a/packages/markdown/remark/src/index.ts b/packages/markdown/remark/src/index.ts
index 9dfc0e38c..7034564c3 100644
--- a/packages/markdown/remark/src/index.ts
+++ b/packages/markdown/remark/src/index.ts
@@ -6,6 +6,7 @@ import rehypeEscape from './rehype-escape.js';
 import rehypeExpressions from './rehype-expressions.js';
 import rehypeIslands from './rehype-islands.js';
 import rehypeJsx from './rehype-jsx.js';
+import remarkEscape from './remark-escape.js';
 import remarkMarkAndUnravel from './remark-mark-and-unravel.js';
 import remarkMdxish from './remark-mdxish.js';
 import remarkPrism from './remark-prism.js';
@@ -46,7 +47,7 @@ export async function renderMarkdown(
 	let parser = unified()
 		.use(markdown)
 		.use(isMDX ? [remarkMdxish, remarkMarkAndUnravel] : [])
-		.use([remarkUnwrap]);
+		.use([remarkUnwrap, remarkEscape]);
 
 	if (remarkPlugins.length === 0 && rehypePlugins.length === 0) {
 		remarkPlugins = [...DEFAULT_REMARK_PLUGINS];
diff --git a/packages/markdown/remark/src/remark-escape.ts b/packages/markdown/remark/src/remark-escape.ts
new file mode 100644
index 000000000..312bbe2cd
--- /dev/null
+++ b/packages/markdown/remark/src/remark-escape.ts
@@ -0,0 +1,17 @@
+import { visit } from 'unist-util-visit';
+import type { Literal } from 'unist';
+
+// In code blocks, this removes the JS comment wrapper added to
+// HTML comments by vite-plugin-markdown.
+export default function remarkEscape() {
+	return (tree: any) => {
+		visit(tree, 'code', removeCommentWrapper);
+		visit(tree, 'inlineCode', removeCommentWrapper);
+	};
+
+	function removeCommentWrapper(node: Literal<string>) {
+		node.value = node.value
+			.replace(/{\/\*<!--/gs, '<!--')
+			.replace(/-->\*\/}/gs, '-->');
+	}
+}