Fix cases for JSX-like expressions in code blocks of headings (#3502)

* chore: fix typo in remark tests

* test: add test cases for markdown expressions in header

* fix: avoid evaluating JSX-like expressions inside inline code in heading

* fix: generate slug for id including values in backtick blocks

1 files changed, 32 insertions, 1 deletions

diff --git a/packages/markdown/remark/test/expressions.test.js b/packages/markdown/remark/test/expressions.test.js
index c3c341acd..ba28d9c8e 100644
--- a/packages/markdown/remark/test/expressions.test.js
+++ b/packages/markdown/remark/test/expressions.test.js
@@ -2,7 +2,7 @@ import { renderMarkdown } from '../dist/index.js';
 import chai from 'chai';
 
 describe('expressions', () => {
-	it('should be able to serialize bare expession', async () => {
+	it('should be able to serialize bare expression', async () => {
 		const { code } = await renderMarkdown(`{a}`, {});
 
 		chai.expect(code).to.equal(`{a}`);
@@ -40,6 +40,37 @@ describe('expressions', () => {
 			);
 	});
 
+	it('should be able to avoid evaluating JSX-like expressions in an inline code & generate a slug for id', async () => {
+		const { code } = await renderMarkdown(`# \`{frontmatter.title}\``, {});
+
+		chai
+			.expect(code)
+			.to.equal('<h1 id="frontmattertitle"><code is:raw>{frontmatter.title}</code></h1>');
+	});
+
+	it('should be able to avoid evaluating JSX-like expressions in inline codes', async () => {
+		const { code } = await renderMarkdown(`# \`{ foo }\` is a shorthand for \`{ foo: foo }\``, {});
+
+		chai
+			.expect(code)
+			.to.equal(
+				'<h1 id="-foo--is-a-shorthand-for--foo-foo-"><code is:raw>{ foo }</code> is a shorthand for <code is:raw>{ foo: foo }</code></h1>'
+			);
+	});
+
+	it('should be able to avoid evaluating JSX-like expressions & escape HTML tag characters in inline codes', async () => {
+		const { code } = await renderMarkdown(
+			`###### \`{}\` is equivalent to \`Record<never, never>\` <small>(at TypeScript v{frontmatter.version})</small>`,
+			{}
+		);
+
+		chai
+			.expect(code)
+			.to.equal(
+				`<h6 id={$$slug(\`{} is equivalent to Record&lt;never, never&gt; (at TypeScript v\${frontmatter.version})\`)}><code is:raw>{}</code> is equivalent to <code is:raw>Record&lt;never, never&gt;</code> <small>(at TypeScript v{frontmatter.version})</small></h6>`
+			);
+	});
+
 	it('should be able to serialize function expression', async () => {
 		const { code } = await renderMarkdown(
 			`{frontmatter.list.map(item => <p id={item}>{item}</p>)}`,