Use a placeholder map. Push Vars

server/rehype-hljs-var.ts

@@ -134,6 +134,24 @@ export const rehypeVarInHLJS = (
         // children. Otherwise add a text node or a span, depending on the
         // value's parent.
         let newChildren: Array<MdxJsxFlowElement | Element> = [];
+
+        // Assemble a map of indexes to their corresponding placeholders so we
+        // can tell whether a given index falls within a placeholder.
+        const placeholderIndices = new Map();
+        placeholders.forEach((p) => {
+          placeholderIndices.set(p.index, p);
+        });
+
+        let valueIdx = 0;
+        while (valueIdx < hljsSpanValue.length) {
+          if (placeholderIndices.has(valueIdx)) {
+            const placeholder = valueIdx + placeholderIndices.get(valueIdx);
+            valueIdx += placeholder.length;
+            newChildren.push(placeholdersToVars[placeholderValue]);
+            continue;
+          }
+        }
+
         // If there is content before the first Var, separate it into a new hljs
         // span.
         if (placeholders[0].index > 0) {