Skip to content

Commit 8475206

Browse files
JeanMecheAndrewKushnir
JeanMeche
authored and
AndrewKushnir
committed
docs(docs-infra): Update marked to 14 (#57363)
This is a backport of the marked update and the fix that went with it (#57338) PR Close #57363
1 parent d3b46ad commit 8475206

File tree

14 files changed

+81
-61
lines changed

14 files changed

+81
-61
lines changed

‎adev/shared-docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"fflate": "^0.8.2",
2121
"html-entities": "~2.5.2",
2222
"jsdom": "~24.1.0",
23-
"marked": "~12.0.2",
23+
"marked": "~14.0.0",
2424
"mermaid": "^10.8.0",
2525
"shiki": "^1.10.3"
2626
},

‎adev/shared-docs/pipeline/api-gen/rendering/marked/renderer.ts‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,16 @@
66
* found in the LICENSE file at https://angular.dev/license
77
*/
88

9-
import {Renderer as MarkedRenderer} from 'marked';
9+
import {Renderer, Tokens} from 'marked';
1010
import {codeToHtml} from '../shiki/shiki';
1111

1212
/**
1313
* Custom renderer for marked that will be used to transform markdown files to HTML
1414
* files that can be used in the Angular docs.
1515
*/
16-
export const renderer: Partial<MarkedRenderer> = {
17-
code(code: string, language: string, isEscaped: boolean): string {
18-
const highlightResult = codeToHtml(code, language).replace(/>\s+</g, '><');
16+
export const renderer: Partial<Renderer> = {
17+
code({lang, text}): string {
18+
const highlightResult = codeToHtml(text, lang).replace(/>\s+</g, '><');
1919

2020
return `
2121
<div class="docs-code" role="group">
@@ -25,37 +25,46 @@ export const renderer: Partial<MarkedRenderer> = {
2525
</div>
2626
`;
2727
},
28-
image(href: string | null, title: string | null, text: string): string {
28+
image({href, title, text}): string {
2929
return `
3030
<img src="${href}" alt="${text}" title="${title}" class="docs-image">
3131
`;
3232
},
33-
link(href: string, title: string, text: string): string {
33+
link({href, text}): string {
3434
return `<a href="${href}">${text}</a>`;
3535
},
36-
list(body: string, ordered: boolean, start: number) {
36+
list(this: Renderer, {items, ordered, start}) {
3737
if (ordered) {
3838
return `
3939
<ol class="docs-ordered-list">
40-
${body}
40+
${items.map((item) => this.listitem(item)).join('')}
4141
</ol>
4242
`;
4343
}
4444
return `
4545
<ul class="docs-list">
46-
${body}
46+
${items.map((item) => this.listitem(item)).join('')}
4747
</ul>
4848
`;
4949
},
50-
table(header: string, body: string): string {
50+
51+
table(this: Renderer, {header, rows}: Tokens.Table) {
5152
return `
5253
<div class="docs-table docs-scroll-track-transparent">
5354
<table>
5455
<thead>
55-
${header}
56+
${this.tablerow({
57+
text: header.map((cell) => this.tablecell(cell)).join(''),
58+
})}
5659
</thead>
5760
<tbody>
58-
${body}
61+
${rows
62+
.map((row) =>
63+
this.tablerow({
64+
text: row.map((cell) => this.tablecell(cell)).join(''),
65+
}),
66+
)
67+
.join('')}
5968
</tbody>
6069
</table>
6170
</div>

‎adev/shared-docs/pipeline/guides/extensions/docs-workflow/docs-step.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export const docsStepExtension = {
5151
return `
5252
<li>
5353
<span class="docs-step-number" aria-hidden="true"></span>
54-
${headingRender(token.title, 3, token.title)}
54+
${headingRender({text: token.title, depth: 3, type: 'heading', raw: token.title, tokens: []})}
5555
${this.parser.parse(token.tokens)}
5656
</li>
5757
`;

‎adev/shared-docs/pipeline/guides/parse.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
import {marked} from 'marked';
1010
import {hooks} from './hooks';
11-
import {renderer} from './renderer';
11+
import {Renderer} from './renderer';
1212
import {docsAlertExtension} from './extensions/docs-alert';
1313
import {docsCalloutExtension} from './extensions/docs-callout';
1414
import {docsPillExtension} from './extensions/docs-pill/docs-pill';
@@ -33,7 +33,6 @@ export async function parseMarkdown(
3333

3434
marked.use({
3535
hooks,
36-
renderer,
3736
extensions: [
3837
docsAlertExtension,
3938
docsCalloutExtension,
@@ -55,5 +54,5 @@ export async function parseMarkdown(
5554
async: true,
5655
});
5756

58-
return marked.parse(markdownContent);
57+
return marked.parse(markdownContent, {renderer: new Renderer()});
5958
}

‎adev/shared-docs/pipeline/guides/renderer.ts‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
import {RendererObject} from 'marked';
1+
import {Renderer as _Renderer} from 'marked';
22
import {linkRender} from './tranformations/link';
33
import {tableRender} from './tranformations/table';
44
import {listRender} from './tranformations/list';
55
import {imageRender} from './tranformations/image';
66
import {textRender} from './tranformations/text';
77
import {headingRender} from './tranformations/heading';
8-
98
/**
109
* Custom renderer for marked that will be used to transform markdown files to HTML
1110
* files that can be used in the Angular docs.
1211
*/
13-
export const renderer: RendererObject = {
14-
link: linkRender,
15-
table: tableRender,
16-
list: listRender,
17-
image: imageRender,
18-
text: textRender,
19-
heading: headingRender,
20-
};
12+
export class Renderer extends _Renderer {
13+
override link = linkRender;
14+
override table = tableRender;
15+
override list = listRender;
16+
override image = imageRender;
17+
override text = textRender;
18+
override heading = headingRender;
19+
}

‎adev/shared-docs/pipeline/guides/tranformations/heading.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@
66
* found in the LICENSE file at https://angular.dev/license
77
*/
88

9-
import {RendererApi} from 'marked';
9+
import {Renderer, Tokens} from 'marked';
1010

1111
import {getHeaderId} from '../state';
1212
import {getPageTitle} from '../utils';
1313

14-
export const headingRender: RendererApi['heading'] = (text, level, raw) => {
15-
if (level === 1) {
14+
export function headingRender({text, depth}: Tokens.Heading): string;
15+
export function headingRender(this: Renderer, {text, depth}: Tokens.Heading): string {
16+
if (depth === 1) {
1617
return `
1718
<header class="docs-header">
1819
<docs-breadcrumb></docs-breadcrumb>
@@ -36,8 +37,8 @@ export const headingRender: RendererApi['heading'] = (text, level, raw) => {
3637
const label = anchorLessText.replace(/`(.*?)`/g, '<code>$1</code>').replace(customIdRegex, '');
3738

3839
return `
39-
<h${level} id="${link}">
40+
<h${depth} id="${link}">
4041
<a href="#${link}" class="docs-anchor" tabindex="-1" aria-label="Link to ${label}">${label}</a>
41-
</h${level}>
42+
</h${depth}>
4243
`;
43-
};
44+
}

‎adev/shared-docs/pipeline/guides/tranformations/image.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,16 @@
77
*/
88

99
import {normalize} from 'path';
10-
import {RendererApi} from 'marked';
10+
11+
import {Renderer, Tokens} from 'marked';
1112

1213
// TODO(josephperrott): Determine how we can define/know the image content base path.
1314
const imageContentBasePath = 'unknown';
1415

15-
export const imageRender: RendererApi['image'] = (href, title, text) => {
16+
export function imageRender(this: Renderer, {href, title, text}: Tokens.Image) {
1617
const isRelativeSrc = href?.startsWith('./');
1718
const src = isRelativeSrc ? `${imageContentBasePath}/${normalize(href)}` : href;
1819
return `
1920
<img src="${src}" alt="${text}" title="${title}" class="docs-image">
2021
`;
21-
};
22+
}

‎adev/shared-docs/pipeline/guides/tranformations/link.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
*/
88

99
import {anchorTarget} from '../helpers';
10-
import {RendererApi} from 'marked';
10+
import {Renderer, Tokens} from 'marked';
1111

12-
export const linkRender: RendererApi['link'] = (href, title, text) => {
12+
export function linkRender(this: Renderer, {href, title, text}: Tokens.Link) {
1313
const titleAttribute = title ? ` title=${title}` : '';
1414
return `<a href="${href}"${titleAttribute}${anchorTarget(href)}>${text}</a>`;
15-
};
15+
}

‎adev/shared-docs/pipeline/guides/tranformations/list.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,19 @@
66
* found in the LICENSE file at https://angular.dev/license
77
*/
88

9-
import {RendererApi} from 'marked';
9+
import {Renderer, Tokens} from 'marked';
1010

11-
export const listRender: RendererApi['list'] = (body, ordered, start) => {
11+
export function listRender(this: Renderer, {items, ordered}: Tokens.List) {
1212
if (ordered) {
1313
return `
1414
<ol class="docs-ordered-list">
15-
${body}
15+
${items.map((item) => this.listitem(item)).join('')}
1616
</ol>
1717
`;
1818
}
1919
return `
2020
<ul class="docs-list">
21-
${body}
21+
${items.map((item) => this.listitem(item)).join('')}
2222
</ul>
2323
`;
24-
};
24+
}

‎adev/shared-docs/pipeline/guides/tranformations/table.ts‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,27 @@
66
* found in the LICENSE file at https://angular.dev/license
77
*/
88

9-
import {RendererApi} from 'marked';
9+
import {Renderer, Tokens} from 'marked';
1010

11-
export const tableRender: RendererApi['table'] = (header, body) => {
11+
export function tableRender(this: Renderer, {header, rows}: Tokens.Table) {
1212
return `
1313
<div class="docs-table docs-scroll-track-transparent">
1414
<table>
1515
<thead>
16-
${header}
16+
${this.tablerow({
17+
text: header.map((cell) => this.tablecell(cell)).join(''),
18+
})}
1719
</thead>
1820
<tbody>
19-
${body}
21+
${rows
22+
.map((row) =>
23+
this.tablerow({
24+
text: row.map((cell) => this.tablecell(cell)).join(''),
25+
}),
26+
)
27+
.join('')}
2028
</tbody>
2129
</table>
2230
</div>
2331
`;
24-
};
32+
}

0 commit comments

Comments
 (0)