docs(docs-infra): fix marked rendering

JeanMeche · JeanMeche · commit 2c9db900c8cb · 2024-08-12T01:31:54.000+02:00
Follow-up to #57319 which introduced some regressions after updating marked to v14
diff --git a/adev/shared-docs/pipeline/api-gen/rendering/marked/renderer.ts b/adev/shared-docs/pipeline/api-gen/rendering/marked/renderer.ts
@@ -6,16 +6,16 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Renderer as MarkedRenderer, Tokens} from 'marked';
+import {Renderer, Tokens} from 'marked';
 import {codeToHtml} from '../shiki/shiki';
 
 /**
  * Custom renderer for marked that will be used to transform markdown files to HTML
  * files that can be used in the Angular docs.
  */
-export const renderer: Partial<MarkedRenderer> = {
-  code({lang, raw}): string {
-    const highlightResult = codeToHtml(raw, lang).replace(/>\s+</g, '><');
+export const renderer: Partial<Renderer> = {
+  code({lang, text}): string {
+    const highlightResult = codeToHtml(text, lang).replace(/>\s+</g, '><');
 
     return `
       <div class="docs-code" role="group">
@@ -33,22 +33,22 @@ export const renderer: Partial<MarkedRenderer> = {
   link({href, text}): string {
     return `<a href="${href}">${text}</a>`;
   },
-  list({items, ordered, start}) {
+  list(this: Renderer, {items, ordered, start}) {
     if (ordered) {
       return `
       <ol class="docs-ordered-list">
-        ${items}
+        ${items.map((item) => this.listitem(item)).join('')}
       </ol>
       `;
     }
     return `
     <ul class="docs-list">
-      ${items}
+      ${items.map((item) => this.listitem(item)).join('')}
     </ul>
     `;
   },
 
-  table(this: MarkedRenderer, {header, rows}: Tokens.Table) {
+  table(this: Renderer, {header, rows}: Tokens.Table) {
     return `
       <div class="docs-table docs-scroll-track-transparent">
         <table>
diff --git a/adev/shared-docs/pipeline/guides/tranformations/text.ts b/adev/shared-docs/pipeline/guides/tranformations/text.ts
@@ -15,8 +15,9 @@ const UNICODE_EMOJI_REGEX = /&#x[\dA-Fa-f]+;/g;
 /** Regex to find emojis. */
 const regex = emojiRegex();
 
-export function textRender(this: Renderer, {text}: Tokens.Text) {
-  return regex.test(text) || UNICODE_EMOJI_REGEX.test(text)
+export function textRender(this: Renderer, token: Tokens.Text) {
+  const text = token.tokens ? this.parser.parseInline(token.tokens) : token.text;
+  return regex.test(token.text) || UNICODE_EMOJI_REGEX.test(token.text)
     ? `<span class="docs-emoji">${text}</span>`
     : text;
 }
diff --git a/packages/core/src/authoring/output/output.ts b/packages/core/src/authoring/output/output.ts
@@ -33,8 +33,8 @@ export interface OutputOptions {
  *
  * To use `output()`, import the function from `@angular/core`.
  *
- * ```
- * import {output} from '@angular/core`;
+ * ```ts
+ * import {output} from '@angular/core';
  * ```
  *
  * Inside your component, introduce a new class member and initialize

Original file line number	Diff line number	Diff line change
`@@ -33,8 +33,8 @@ export interface OutputOptions {`
`33`	`33`	`*`
`34`	`34`	* To use `output()`, import the function from `@angular/core`.
`35`	`35`	`*`
`36`		- * ```
`37`		- * import {output} from '@angular/core`;
	`36`	+ * ```ts
	`37`	`+ * import {output} from '@angular/core';`
`38`	`38`	* ```
`39`	`39`	`*`
`40`	`40`	`* Inside your component, introduce a new class member and initialize`