docs: show red underlines in examples in rules docs

.github/workflows/docs-ci.yml

@@ -27,6 +27,9 @@ jobs:
       working-directory: docs
       run: npm install
 
+    - name: Install Packages
+      run: npm install --force
+
     - name: Stylelint Docs
       working-directory: docs
       run: npm run lint:scss

docs/.eleventy.js

@@ -16,6 +16,7 @@ const {
 } = require("luxon");
 const markdownIt = require("markdown-it");
 const markdownItRuleExample = require("./tools/markdown-it-rule-example");
+const { addContentMustBeMarked } = require("./tools/prism-eslint-hook");
 
 module.exports = function(eleventyConfig) {
 
@@ -194,7 +195,10 @@ module.exports = function(eleventyConfig) {
 
     // markdown-it plugin options for playground-linked code blocks in rule examples.
     const ruleExampleOptions = markdownItRuleExample({
-        open({ type, code, parserOptions, env }) {
+        open({ type, code, parserOptions, env, codeBlockToken }) {
+
+            addContentMustBeMarked(codeBlockToken.content, parserOptions);
+
             const isRuleRemoved = !Object.hasOwn(env.rules_meta, env.title);
 
             if (isRuleRemoved) {

docs/netlify.toml

@@ -0,0 +1,2 @@
+[build]
+  command = "cd .. && npm install -f && cd ./docs && npm run build"

docs/src/_plugins/md-syntax-highlighter.js

@@ -26,6 +26,7 @@ SOFTWARE.
 
 const Prism = require("prismjs");
 const loadLanguages = require("prismjs/components/");
+require("../../tools/prism-eslint-hook").installPrismESLintMarkerHook();
 
 /**
  *

docs/src/assets/scss/syntax-highlighter.scss

@@ -99,6 +99,39 @@ pre[class*="language-"] {
     cursor: help;
 }
 
+.token.eslint-marked {
+    /* Draw the wavy line. */
+    background:
+        url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23f14c4c'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
+        repeat-x
+        bottom
+        left;
+
+    /*
+     * Since the character width of the token span is not constant,
+     * if we use it as is, we may see a shift in the border.
+     * To make the border shift less noticeable, draw it with a smaller width.
+     */
+    background-size: 4.4px auto;
+}
+
+.token.eslint-marked-on-zero-width {
+    position: relative;
+
+    /* Delete the wavy line. */
+    background: none;
+}
+
+.token.eslint-marked-on-zero-width::before {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: -2px;
+    border-left: 3px solid transparent;
+    border-right: 3px solid transparent;
+    border-bottom: 4px solid #d11;
+}
+
 .line-numbers-wrapper {
     position: absolute;
     top: 0;

docs/tools/code-block-utils.js

@@ -0,0 +1,26 @@
+/**
+ * @fileoverview A utility related to markdown code blocks.
+ * @author Yosuke Ota
+ */
+"use strict";
+
+/**
+ * Replaces some marks used in the code in the document and converts it into parsable code.
+ * The replaced string will be used in the linter,
+ * so be careful not to replace characters that change the location of the line and column.
+ * @param {string} code The code in the document.
+ * @returns {string} The parsable code.
+ */
+function docsExampleCodeToParsableCode(code) {
+    return code
+
+        // Remove trailing newline and presentational `⏎` characters
+        .replace(/⏎(?=\n)/gu, "")
+
+        // Code blocks always contain extra line breaks, so remove them.
+        .replace(/\n$/u, "");
+}
+
+module.exports = {
+    docsExampleCodeToParsableCode
+};

docs/tools/markdown-it-rule-example.js

@@ -1,5 +1,7 @@
 "use strict";
 
+const { docsExampleCodeToParsableCode } = require("./code-block-utils");
+
 /** @typedef {import("../../lib/shared/types").ParserOptions} ParserOptions */
 
 /**
@@ -75,9 +77,7 @@ function markdownItRuleExample({ open, close }) {
             const codeBlockToken = tokens[index + 1];
 
             // Remove trailing newline and presentational `⏎` characters (https://github.com/eslint/eslint/issues/17627):
-            const code = codeBlockToken.content
-                .replace(/\n$/u, "")
-                .replace(/⏎(?=\n)/gu, "");
+            const code = docsExampleCodeToParsableCode(codeBlockToken.content);
 
             const text = open({ type, code, parserOptions, codeBlockToken, env });