Fix coloring of links in Returns header

Resolves #2546

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Unreleased
 
+### Bug Fixes
+
+-   Header anchor links in rendered markdown are now more consistent with headers generated by TypeDoc, #2546.
+-   Types rendered in the `Returns` header are now properly colored, #2546.
+
 ## v0.25.13 (2024-04-07)
 
 ### Features

scripts/download_plugins.js

@@ -28,7 +28,16 @@ function exec(command) {
 
 async function getPlugins() {
     const plugins = JSON.parse(await exec("npm search --json typedocplugin"));
-    return plugins.filter((plugin) => Date.parse(plugin.date) > CUTOFF_MS);
+    const plugins2 = JSON.parse(await exec("npm search --json typedoc-plugin"));
+    const plugins3 = JSON.parse(await exec("npm search --json typedoc-theme"));
+    const recentlyUpdated = [...plugins, ...plugins2, ...plugins3].filter(
+        (plugin) => Date.parse(plugin.date) > CUTOFF_MS,
+    );
+
+    return recentlyUpdated.filter(
+        (plugin, i) =>
+            i === recentlyUpdated.findIndex((p) => p.name === plugin.name),
+    );
 }
 
 function getTarballUrl(package) {

src/lib/output/themes/MarkedPlugin.tsx

@@ -8,6 +8,8 @@ import { Option, readFile, copySync, isFile, JSX, renderElement } from "../../ut
 import { highlight, isSupportedLanguage } from "../../utils/highlighter";
 import type { Theme } from "shiki";
 import { escapeHtml, getTextContent } from "../../utils/html";
+import { anchorIcon } from "./default/partials/anchor-icon";
+import type { DefaultThemeRenderContext } from "..";
 
 /**
  * Implements markdown and relativeURL helpers for templates.
@@ -27,6 +29,12 @@ export class MarkedPlugin extends ContextAwareRendererComponent {
     @Option("darkHighlightTheme")
     accessor darkTheme!: Theme;
 
+    /**
+     * This needing to be here really feels hacky... probably some nicer way to do this.
+     * Revisit when adding support for arbitrary pages.
+     */
+    private renderContext: DefaultThemeRenderContext = null!;
+
     /**
      * The path referenced files are located in.
      */
@@ -89,7 +97,9 @@ output file :
      * @param text  The markdown string that should be parsed.
      * @returns The resulting html string.
      */
-    public parseMarkdown(text: string, page: PageEvent<any>) {
+    public parseMarkdown(text: string, page: PageEvent<any>, context: DefaultThemeRenderContext) {
+        this.renderContext = context;
+
         if (this.includes) {
             text = text.replace(this.includePattern, (_match, path) => {
                 path = Path.join(this.includes!, path.trim());
@@ -121,6 +131,7 @@ output file :
         const event = new MarkdownEvent(MarkdownEvent.PARSE, page, text, text);
 
         this.owner.trigger(event);
+        this.renderContext = null!;
         return event.parsedText;
     }
 
@@ -190,10 +201,9 @@ output file :
                 return renderElement(
                     <>
                         <a id={`md:${slug}`} class="tsd-anchor" />
-                        <H>
-                            <a href={`#md:${slug}`}>
-                                <JSX.Raw html={text} />
-                            </a>
+                        <H class="tsd-anchor-link">
+                            <JSX.Raw html={text} />
+                            {anchorIcon(this.renderContext, `md:${slug}`)}
                         </H>
                     </>,
                 );
@@ -218,6 +228,7 @@ output file :
 
 // Basically a copy/paste of Marked's code, with the addition of the button
 // https://github.com/markedjs/marked/blob/v4.3.0/src/Renderer.js#L15-L39
+// cSpell:ignore infostring
 function renderCode(this: Marked.marked.Renderer, code: string, infostring: string | undefined, escaped: boolean) {
     const lang = (infostring || "").match(/\S*/)![0];
     if (this.options.highlight) {

src/lib/output/themes/default/DefaultThemeRenderContext.ts

@@ -62,7 +62,7 @@ export class DefaultThemeRenderContext {
         options: Options,
     ) {
         this.options = options;
-        this._refIcons = buildRefIcons(icons, this);
+        this._refIcons = buildRefIcons(theme.icons, this);
     }
 
     /**
@@ -105,9 +105,12 @@ export class DefaultThemeRenderContext {
             return this.theme.markedPlugin.parseMarkdown(
                 Comment.displayPartsToMarkdown(md, this.urlTo),
                 this.page,
+                this,
             );
         }
-        return md ? this.theme.markedPlugin.parseMarkdown(md, this.page) : "";
+        return md
+            ? this.theme.markedPlugin.parseMarkdown(md, this.page, this)
+            : "";
     };
 
     getNavigation = () => this.theme.getNavigation(this.page.project);

src/lib/output/themes/default/partials/hierarchy.tsx

@@ -21,11 +21,7 @@ export function hierarchy(context: DefaultThemeRenderContext, props: Declaration
     const fullLink = hasAnyLinkedReferenceType(props) ? (
         <>
             {" "}
-            (
-            <a class="link" href={context.relativeURL("hierarchy.html") + "#" + context.page.model.getFullName()}>
-                view full
-            </a>
-            )
+            (<a href={context.relativeURL("hierarchy.html") + "#" + context.page.model.getFullName()}>view full</a>)
         </>
     ) : (
         <></>

static/style.css

@@ -266,16 +266,6 @@ h6 {
     line-height: 1.2;
 }
 
-h1 > a:not(.link),
-h2 > a:not(.link),
-h3 > a:not(.link),
-h4 > a:not(.link),
-h5 > a:not(.link),
-h6 > a:not(.link) {
-    text-decoration: none;
-    color: var(--color-text);
-}
-
 h1 {
     font-size: 1.875rem;
     margin: 0.67rem 0;
@@ -421,6 +411,9 @@ a.external[target="_blank"] {
     background-repeat: no-repeat;
     padding-right: 13px;
 }
+a.tsd-anchor-link {
+    color: var(--color-text);
+}
 
 code,
 pre {