Encode ampersands in markdown code blocks (#3630)

* encode ampersands in markdown code blocks

* chore: add changeset

* nit: fixing test case description

2 files changed, 29 insertions, 2 deletions

diff --git a/packages/markdown/remark/src/rehype-escape.ts b/packages/markdown/remark/src/rehype-escape.ts
index a32027b89..e776c1bb1 100644
--- a/packages/markdown/remark/src/rehype-escape.ts
+++ b/packages/markdown/remark/src/rehype-escape.ts
@@ -8,7 +8,7 @@ export default function rehypeEscape(): any {
 				// Visit all raw children and escape HTML tags to prevent Markdown code
 				// like "This is a `<script>` tag" from actually opening a script tag
 				visit(el, 'raw', (raw) => {
-					raw.value = raw.value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+					raw.value = raw.value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 				});
 			}
 			return el;
diff --git a/packages/markdown/remark/test/expressions.test.js b/packages/markdown/remark/test/expressions.test.js
index fdf578923..0361e1df8 100644
--- a/packages/markdown/remark/test/expressions.test.js
+++ b/packages/markdown/remark/test/expressions.test.js
@@ -1,5 +1,5 @@
 import { renderMarkdown } from '../dist/index.js';
-import chai from 'chai';
+import chai, { expect } from 'chai';
 
 describe('expressions', () => {
 	it('should be able to serialize bare expression', async () => {
@@ -71,6 +71,33 @@ describe('expressions', () => {
 			);
 	});
 
+	it('should be able to encode ampersand characters in code blocks', async () => {
+		const { code } = await renderMarkdown(
+			'The ampersand in `&nbsp;` must be encoded in code blocks.',
+			{}
+		);
+
+		chai
+			.expect(code)
+			.to.equal(
+				'<p>The ampersand in <code is:raw>&amp;nbsp;</code> must be encoded in code blocks.</p>'
+			)
+	});
+
+	it('should be able to encode ampersand characters in fenced code blocks', async () => {
+		const { code } = await renderMarkdown(`
+		\`\`\`md
+			The ampersand in \`&nbsp;\` must be encoded in code blocks.
+		\`\`\`
+		`);
+
+		chai
+			.expect(code)
+			.to.match(
+				/^<pre is:raw.*<code>.*The ampersand in `&amp;nbsp;`/
+			);
+	})
+
 	it('should be able to serialize function expression', async () => {
 		const { code } = await renderMarkdown(
 			`{frontmatter.list.map(item => <p id={item}>{item}</p>)}`,