kyfx
/
playwright
mirror of https://github.com/microsoft/playwright.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Simon Knott 2024-10-04 16:38:13 +02:00 committed by GitHub
parent 6be97f34dd
commit 80ff7c396a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/src/ci.md
View File

@ -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. 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. 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 name: Playwright Tests
on: on:
push: push:

20
utils/markdown.js
View File

@ -46,6 +46,7 @@
* lines: string[], * lines: string[],
* codeLang: string, * codeLang: string,
* title?: string, * title?: string,
* highlight?: string,
* }} MarkdownCodeNode */ * }} MarkdownCodeNode */
/** @typedef {MarkdownBaseNode & { /** @typedef {MarkdownBaseNode & {
@ -165,13 +166,14 @@ function buildTree(lines) {
// Remaining items respect indent-based nesting. // Remaining items respect indent-based nesting.
const [, indent, content] = /** @type {string[]} */ (line.match('^([ ]*)(.*)')); const [, indent, content] = /** @type {string[]} */ (line.match('^([ ]*)(.*)'));
if (content.startsWith('```')) { if (content.startsWith('```')) {
const [codeLang, title] = parseCodeBlockMetadata(content); const [codeLang, title, highlight] = parseCodeBlockMetadata(content);
/** @type {MarkdownNode} */ /** @type {MarkdownNode} */
const node = { const node = {
type: 'code', type: 'code',
lines: [], lines: [],
codeLang, codeLang,
title, title,
highlight,
}; };
line = lines[++i]; line = lines[++i];
while (!line.trim().startsWith('```')) { while (!line.trim().startsWith('```')) {
@ -255,14 +257,18 @@ function buildTree(lines) {
/** /**
* @param {String} firstLine * @param {String} firstLine
* @returns {[string, string|undefined]} * @returns {[string, string|undefined, string|undefined]}
*/ */
function parseCodeBlockMetadata(firstLine) { function parseCodeBlockMetadata(firstLine) {
const withoutBackticks = firstLine.substring(3); const withoutBackticks = firstLine.substring(3);
const match = withoutBackticks.match(/ title="(.+)"$/); const titleMatch = withoutBackticks.match(/ title="(.+)"/);
if (match) const highlightMatch = withoutBackticks.match(/\{.*\}/);
return [withoutBackticks.substring(0, match.index), match[1]];
return [withoutBackticks, undefined]; 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') { if (node.type === 'code') {
newLine(); 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) if (!options?.renderCodeBlockTitlesInHeader && node.title)
result.push(`${indent}// ${node.title}`); result.push(`${indent}// ${node.title}`);
for (const line of node.lines) for (const line of node.lines)