diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts index 3231be8121..7cbbde6b9c 100644 --- a/packages/site-kit/src/lib/markdown/renderer.ts +++ b/packages/site-kit/src/lib/markdown/renderer.ts @@ -148,15 +148,48 @@ export async function render_content_markdown( } } - return parse({ - body, - type_links, - code: (raw, language, current) => { - const cached_snippet = SNIPPET_CACHE.get(raw + language + current); + const headings: string[] = []; + + // this is a bit hacky, but it allows us to prevent type declarations + // from linking to themselves + let current = ''; + + return await transform(body, { + text(token) { + // @ts-expect-error I think this is a bug in marked — some text tokens have children, + // but that's not reflected in the types. In these cases we can't just use `token.tokens` + // because that will result in e.g. `` elements not being generated + if (token.tokens) { + // @ts-expect-error + return this.parser!.parseInline(token.tokens); + } + + return smart_quotes(token.text, true); + }, + heading({ tokens, depth, raw }) { + const text = this.parser!.parseInline(tokens); + + const title = text + .replace(/<\/?code>/g, '') + .replace(/"/g, '"') + .replace(/</g, '<') + .replace(/>/g, '>'); + current = title; + const normalized = normalizeSlugify(raw); + headings[depth - 1] = normalized; + headings.length = depth; + const slug = headings.filter(Boolean).join('-'); + return `${text.replace( + /<\/?code>/g, + '' + )}`; + }, + code({ text, lang = 'js' }) { + const cached_snippet = SNIPPET_CACHE.get(text + lang + current); if (cached_snippet.code) return cached_snippet.code; - let { source, options } = parse_options(raw, language); - source = adjust_tab_indentation(source, language); + let { source, options } = parse_options(text, lang); + source = adjust_tab_indentation(source, lang); const converted = conversions.get(source); @@ -182,7 +215,7 @@ export async function render_content_markdown( html += syntax_highlight({ filename, highlighter, - language, + language: lang, source, twoslashBanner, options @@ -192,7 +225,7 @@ export async function render_content_markdown( html += syntax_highlight({ filename, highlighter, - language: language === 'js' ? 'ts' : language, + language: lang === 'js' ? 'ts' : lang, source: converted, twoslashBanner, options @@ -225,7 +258,7 @@ export async function render_content_markdown( return html; }, - codespan: (text) => { + codespan({ text }) { return ( '' + (type_regex @@ -238,61 +271,6 @@ export async function render_content_markdown( : text) + '' ); - } - }); -} - -async function parse({ - body, - code, - codespan -}: { - body: string; - type_links: Map | null; - code: (source: string, language: string, current: string) => string; - codespan: (source: string) => string; -}) { - const headings: string[] = []; - - // this is a bit hacky, but it allows us to prevent type declarations - // from linking to themselves - let current = ''; - - return await transform(body, { - text(token) { - // @ts-expect-error I think this is a bug in marked — some text tokens have children, - // but that's not reflected in the types. In these cases we can't just use `token.tokens` - // because that will result in e.g. `` elements not being generated - if (token.tokens) { - // @ts-expect-error - return this.parser!.parseInline(token.tokens); - } - - return smart_quotes(token.text, true); - }, - heading({ tokens, depth, raw }) { - const text = this.parser!.parseInline(tokens); - - const title = text - .replace(/<\/?code>/g, '') - .replace(/"/g, '"') - .replace(/</g, '<') - .replace(/>/g, '>'); - current = title; - const normalized = normalizeSlugify(raw); - headings[depth - 1] = normalized; - headings.length = depth; - const slug = headings.filter(Boolean).join('-'); - return `${text.replace( - /<\/?code>/g, - '' - )}`; - }, - code({ text, lang }) { - return code(text, lang ?? 'js', current); - }, - codespan({ text }) { - return codespan(text); }, blockquote(token) { let content = this.parser?.parse(token.tokens) ?? '';