From 80ff7c396a596854e11d95e36fb2d66afae53c6c Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Fri, 4 Oct 2024 16:38:13 +0200
Subject: [PATCH] chore(docs): fix code highlighting (#32927)

Closes https://github.com/microsoft/playwright/issues/32921

This is the diff when rolling to `playwright.dev` locally:
<img width="1262" alt="Screenshot 2024-10-02 at 14 54 42"
src="https://github.com/user-attachments/assets/aade7ad4-420c-48c4-a2c9-03fe815a3959">

---------

Signed-off-by: Simon Knott <info@simonknott.de>
---
 docs/src/ci.md    |  2 +-
 utils/markdown.js | 20 +++++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/docs/src/ci.md b/docs/src/ci.md
index 6f6fc9a80e7e2..99033a3e2ed78 100644
--- a/docs/src/ci.md
+++ b/docs/src/ci.md
@@ -415,7 +415,7 @@ Large test suites can take very long to execute. By executing a preliminary test
 This will give you a faster feedback loop and slightly lower CI consumption while working on Pull Requests.
 To detect test files affected by your changeset, `--only-changed` analyses your suites' dependency graph. This is a heuristic and might miss tests, so it's important that you always run the full test suite after the preliminary test run.
 
-```yml js title=".github/workflows/playwright.yml"
+```yml js title=".github/workflows/playwright.yml" {24-26}
 name: Playwright Tests
 on:
   push:
diff --git a/utils/markdown.js b/utils/markdown.js
index 3e206ade3b1af..faf62f195118e 100644
--- a/utils/markdown.js
+++ b/utils/markdown.js
@@ -46,6 +46,7 @@
  *    lines: string[],
  *    codeLang: string,
  *    title?: string,
+ *    highlight?: string,
  *  }} MarkdownCodeNode */
 
 /** @typedef {MarkdownBaseNode & {
@@ -165,13 +166,14 @@ function buildTree(lines) {
     // Remaining items respect indent-based nesting.
     const [, indent, content] = /** @type {string[]} */ (line.match('^([ ]*)(.*)'));
     if (content.startsWith('```')) {
-      const [codeLang, title] = parseCodeBlockMetadata(content);
+      const [codeLang, title, highlight] = parseCodeBlockMetadata(content);
       /** @type {MarkdownNode} */
       const node = {
         type: 'code',
         lines: [],
         codeLang,
         title,
+        highlight,
       };
       line = lines[++i];
       while (!line.trim().startsWith('```')) {
@@ -255,14 +257,18 @@ function buildTree(lines) {
 
 /**
  * @param {String} firstLine
- * @returns {[string, string|undefined]}
+ * @returns {[string, string|undefined, string|undefined]}
  */
 function parseCodeBlockMetadata(firstLine) {
   const withoutBackticks = firstLine.substring(3);
-  const match = withoutBackticks.match(/ title="(.+)"$/);
-  if (match)
-    return [withoutBackticks.substring(0, match.index), match[1]];
-  return [withoutBackticks, undefined];
+  const titleMatch = withoutBackticks.match(/ title="(.+)"/);
+  const highlightMatch = withoutBackticks.match(/\{.*\}/);
+
+  let codeLang = withoutBackticks;
+  if (titleMatch || highlightMatch)
+    codeLang = withoutBackticks.substring(0, titleMatch?.index ?? highlightMatch?.index);
+
+  return [codeLang, titleMatch?.[1], highlightMatch?.[0]];
 }
 
 /**
@@ -328,7 +334,7 @@ function innerRenderMdNode(indent, node, lastNode, result, options) {
 
   if (node.type === 'code') {
     newLine();
-    result.push(`${indent}\`\`\`${node.codeLang}${(options?.renderCodeBlockTitlesInHeader && node.title) ? ' title="' + node.title + '"' : ''}`);
+    result.push(`${indent}\`\`\`${node.codeLang}${(options?.renderCodeBlockTitlesInHeader && node.title) ? ' title="' + node.title + '"' : ''}${node.highlight ? ' ' + node.highlight : ''}`);
     if (!options?.renderCodeBlockTitlesInHeader && node.title)
       result.push(`${indent}// ${node.title}`);
     for (const line of node.lines)