chore(docs): fix code highlighting (#32927)

Closes #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 <[email protected]>
microsoft · Oct 4, 2024 · 80ff7c3 · 80ff7c3
1 parent 6be97f3
commit 80ff7c3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -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)