docs(docs-infra): fix marked rendering (angular#57338)

Follow-up to angular#57319 which introduced some regressions after updating marked to v14 PR Close angular#57338

Author: JeanMeche

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>

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;
 }

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