docs: show red underlines in TypeScript examples in rules docs (#19547)

mdjermanovic · web-flow · commit 5405939efcfe · 2025-03-21T10:08:35.000+01:00
diff --git a/docs/.eleventy.js b/docs/.eleventy.js
@@ -19,6 +19,7 @@ const markdownIt = require("markdown-it");
 const markdownItRuleExample = require("./tools/markdown-it-rule-example");
 const prismESLintHook = require("./tools/prism-eslint-hook");
 const preWrapperPlugin = require("./src/_plugins/pre-wrapper.js");
+const typescriptESLintParser = require("@typescript-eslint/parser");
 
 module.exports = function (eleventyConfig) {
 	/*
@@ -206,22 +207,23 @@ module.exports = function (eleventyConfig) {
 	// markdown-it plugin options for playground-linked code blocks in rule examples.
 	const ruleExampleOptions = markdownItRuleExample({
 		open({ type, code, languageOptions, env, codeBlockToken }) {
-			/*
-			 * TypeScript isn't yet supported on the playground:
-			 * https://github.com/eslint/eslint.org/issues/709
-			 */
-			if (codeBlockToken.info === "ts") {
-				return `<div class="${type}">`;
-			}
+			const isTypeScriptCode =
+				codeBlockToken.info === "ts" || codeBlockToken.info === "tsx";
 
 			prismESLintHook.addContentMustBeMarked(
 				codeBlockToken.content,
-				languageOptions,
+				isTypeScriptCode
+					? { ...languageOptions, parser: typescriptESLintParser }
+					: languageOptions,
 			);
 
 			const isRuleRemoved = !Object.hasOwn(env.rules_meta, env.title);
 
-			if (isRuleRemoved) {
+			/*
+			 * TypeScript isn't yet supported on the playground:
+			 * https://github.com/eslint/eslint.org/issues/709
+			 */
+			if (isRuleRemoved || isTypeScriptCode) {
 				return `<div class="${type}">`;
 			}
 
diff --git a/docs/package.json b/docs/package.json
@@ -31,6 +31,7 @@
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@munter/tap-render": "^0.2.0",
     "@types/markdown-it": "^12.2.3",
+    "@typescript-eslint/parser": "^8.27.0",
     "algoliasearch": "^4.12.1",
     "autoprefixer": "^10.4.13",
     "cross-env": "^7.0.3",
