@@ -1,7 +1,6 @@
 'use strict';
 
 import { getHighlighter } from '@doc-kit/core/plugins/shiki/highlighter.mjs';
-import { createTypeAnnotationHandler } from '@doc-kit/core/plugins/type-annotations/highlighter.mjs';
 
 import { AST_NODE_TYPES } from './constants.mjs';
 import { generate, processChunk } from './generate.mjs';
@@ -44,8 +43,8 @@ export default {
           // Types are highlighted, with their links embedded, as static
           // markup (see `./plugins/static-markup.mjs`)
           handlers: {
-            typeAnnotation: embedHighlightedTypes(
-              createTypeAnnotationHandler(() => getHighlighter('jsx-ast'))
+            typeAnnotation: embedHighlightedTypes(() =>
+              getHighlighter('jsx-ast')
             ),
           },
         },
 
@@ -2,7 +2,6 @@ import assert from 'node:assert/strict';
 import { describe, it } from 'node:test';
 
 import { createHighlighter } from '@doc-kit/core/plugins/shiki/highlighter.mjs';
-import { createTypeAnnotationHandler } from '@doc-kit/core/plugins/type-annotations/highlighter.mjs';
 import { toString } from 'hast-util-to-string';
 import rehypeRaw from 'rehype-raw';
 import { unified } from 'unified';
@@ -13,9 +12,7 @@ import rehypeStaticMarkup, {
 
 const highlighter = await createHighlighter();
 
-const embedTypes = embedHighlightedTypes(
-  createTypeAnnotationHandler(() => highlighter)
-);
+const embedTypes = embedHighlightedTypes(() => highlighter);
 
 // A minimal mdast-util-to-hast state: the handlers only use patch/applyData
 const state = { patch: () => {}, applyData: (_, result) => result };
@@ -134,6 +131,53 @@ describe('embedHighlightedTypes', () => {
     assert.equal(textContent(html), 'Promise<string>');
   });
 
+  it('highlights the same type once for each highlighter', async () => {
+    let calls = 0;
+
+    // The highlighter, counting what its Shiki instance highlights
+    const counting = {
+      resolveLanguage: highlighter.resolveLanguage,
+      get shiki() {
+        const { shiki } = highlighter;
+
+        return {
+          ...shiki,
+          codeToHast: (...args) => {
+            calls++;
+
+            return shiki.codeToHast(...args);
+          },
+        };
+      },
+    };
+
+    const themed = await createHighlighter({
+      themes: { light: 'github-light', dark: 'github-dark' },
+    });
+
+    let current = counting;
+
+    const embed = embedHighlightedTypes(() => current);
+
+    const promise = () =>
+      makeNode('Promise<string>', {
+        typescript: true,
+        links: [{ start: 0, end: 7, text: 'Promise', href: 'mdn.io/promise' }],
+      });
+
+    const first = embed(state, promise());
+    const second = embed(state, promise());
+
+    assert.equal(calls, 1);
+    // Each type is a node of its own, with the same markup
+    assert.notEqual(second, first);
+    assert.equal(innerHTML(second), innerHTML(first));
+
+    current = themed;
+
+    assert.notEqual(innerHTML(embed(state, promise())), innerHTML(first));
+  });
+
   it('leaves a type that was not highlighted as it is', () => {
     const element = embedTypes(state, makeNode('Whatever', { links: [] }));
 
 
@@ -1,5 +1,6 @@
 'use strict';
 
+import { createTypeAnnotationHandler } from '@doc-kit/core/plugins/type-annotations/highlighter.mjs';
 import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
 import { renderToString } from 'preact-render-to-string';
 import { Fragment, jsx, jsxs } from 'preact/jsx-runtime';
@@ -51,29 +52,39 @@ const render = children =>
   );
 
 /**
- * Turns the `<code>` of highlighted code into a JSX `<code>` holding its
- * markup as it is.
+ * The attributes and the markup of the `<code>` of highlighted code.
  *
  * @param {import('hast').Element} code - The `<code>`
- * @param {boolean} [inline] - Whether it's a type's, rather than a block's
+ * @returns {{ attributes: Record<string, unknown>, html: string }}
  */
-const embedCode = (code, inline = false) => {
+const toMarkup = code => {
   const classNames = getClassNames(code);
 
   // JSX takes the class names as one `className`, which comes first, as
   // `class` did
   const attributes = {
-    inline,
     className: classNames.length > 0 ? classNames.join(' ') : undefined,
     ...code.properties,
-    dangerouslySetInnerHTML: { __html: render(code.children) },
   };
 
   delete attributes.class;
 
-  return createJSXElement('code', attributes);
+  return { attributes, html: render(code.children) };
 };
 
+/**
+ * A JSX `<code>` holding highlighted markup as it is.
+ *
+ * @param {ReturnType<typeof toMarkup>} markup
+ * @param {boolean} [inline] - Whether it's a type's, rather than a block's
+ */
+const createCodeElement = ({ attributes, html }, inline = false) =>
+  createJSXElement('code', {
+    inline,
+    ...attributes,
+    dangerouslySetInnerHTML: { __html: html },
+  });
+
 /**
  * Embeds the code blocks of a tree that Shiki highlighted.
  *
@@ -87,7 +98,7 @@ export const embedHighlightedBlocks = tree => {
 
     if (node.tagName === 'pre' && code?.tagName === 'code') {
       if (isHighlighted(node)) {
-        node.children[0] = embedCode(code);
+        node.children[0] = createCodeElement(toMarkup(code));
       }
 
       return SKIP;
@@ -98,25 +109,46 @@ export const embedHighlightedBlocks = tree => {
 };
 
 /**
- * Wraps a `typeAnnotation` handler of `remark-rehype`, embedding the types it
- * highlights.
+ * Creates the `typeAnnotation` handler of `remark-rehype` highlighting types
+ * and embedding them.
+ *
+ * Every highlighted type is kept, by highlighter: the same few hundred types
+ * are highlighted thousands of times, `{string}` alone on most pages.
  *
- * @param {(state: import('mdast-util-to-hast').State, node: import('mdast').Node) => import('hast').Element} handler
- * @returns {typeof handler}
+ * @param {() => import('@doc-kit/core/plugins/shiki/highlighter.mjs').SyntaxHighlighter} getHighlighter - Gives the highlighter, once a type is highlighted
+ * @returns {(state: import('mdast-util-to-hast').State, node: import('mdast').Node) => import('hast').ElementContent}
  */
-export const embedHighlightedTypes = handler => (state, node) => {
-  const result = handler(state, node);
+export const embedHighlightedTypes = getHighlighter => {
+  const highlight = createTypeAnnotationHandler(getHighlighter);
+  const highlighted = new WeakMap();
 
-  // A type that didn't parse, or links nowhere, isn't highlighted
-  if (!isHighlighted(result)) {
-    return result;
-  }
+  return (state, node) => {
+    const highlighter = getHighlighter();
+
+    if (!highlighted.has(highlighter)) {
+      highlighted.set(highlighter, new Map());
+    }
+
+    const types = highlighted.get(highlighter);
+    const key = JSON.stringify([node.value, node.data]);
+
+    if (!types.has(key)) {
+      const result = highlight(state, node);
 
-  const code = embedCode(result, true);
+      // A type that didn't parse, or links nowhere, isn't highlighted
+      if (!isHighlighted(result)) {
+        return result;
+      }
+
+      types.set(key, toMarkup(result));
+    }
 
-  state.patch(node, code);
+    const code = createCodeElement(types.get(key), true);
 
-  return code;
+    state.patch(node, code);
+
+    return code;
+  };
 };
 
 /**