Only check text nodes

server/fixtures/hcl-addr-var.mdx

@@ -13,21 +13,6 @@
    provider "teleport" {
      addr               = '<Var name="teleport.example.com:443" />'
    }
-   
-   # We must create a test role, if we don't declare resources, Terraform won't try to
-   # connect to Teleport and we won't be able to validate the setup.
-   resource "teleport_role" "test" {
-     version = "v7"
-     metadata = {
-       name        = "test"
-       description = "Dummy role to validate Terraform Provider setup"
-       labels = {
-         test = "yes"
-       }
-     }
-   
-     spec = {}
-   }
    ```
 
 1. Then, init your Terraform working directory to download the Teleport provider:

server/rehype-hljs-var.ts

@@ -75,6 +75,8 @@ export const rehypeVarInHLJS = (
       }
     });
 
+    console.log("placeholdersToVars", placeholdersToVars);
+
     // Apply syntax highlighting
     (highlighter as Function)(root);
 
@@ -84,90 +86,87 @@ export const rehypeVarInHLJS = (
     // inserting these as HTML AST nodes.
     visit(root, undefined, (node: Node, index: number, parent: Parent) => {
       const el = node as Element;
-      if (
-        el.type === "element" &&
-        el.children.length === 1 &&
-        el.children[0].type === "text"
-      ) {
-        const hljsSpanValue = (el.children[0] as Text).value;
 
-        // This is an hljs span with only the placeholder as its child.
-        // We don't need the span, so replace it with the original Var.
-        if (placeholdersToVars[hljsSpanValue]) {
-          (parent as any).children[index] = placeholdersToVars[hljsSpanValue];
-          return [CONTINUE];
-        }
+      console.log("el:", el);
+      if (el.type !== "text") {
+        return [CONTINUE];
+      }
 
-        const placeholders = Array.from(
-          hljsSpanValue.matchAll(new RegExp(placeholderPattern, "g"))
-        );
+      const hljsSpanValue = (el as Text).value;
 
-        // No placeholders to recover, so there's nothing more to do.
-        if (placeholders.length == 0) {
-          return [CONTINUE];
-        }
+      // This is an hljs span with only the placeholder as its child.
+      // We don't need the span, so replace it with the original Var.
+      if (placeholdersToVars[hljsSpanValue]) {
+        (parent as any).children[index] = placeholdersToVars[hljsSpanValue];
+        return [CONTINUE];
+      }
+
+      const placeholders = Array.from(
+        hljsSpanValue.matchAll(new RegExp(placeholderPattern, "g"))
+      );
+
+      // No placeholders to recover, so there's nothing more to do.
+      if (placeholders.length == 0) {
+        return [CONTINUE];
+      }
 
-        // An hljs span's text includes one or more Vars among other content, so
-        // we need to replace the span with a series of spans separated by
-        // Vars.
-        let lastIndex = 0;
-        let newChildren: Array<MdxJsxFlowElement | Element> = [];
-        // If there is content before the first Var, separate it into a new hljs
-        // span.
-        if (placeholders[0].index > 0) {
+      // An hljs span's text includes one or more Vars among other content, so
+      // we need to replace the span with a series of spans separated by
+      // Vars.
+      let lastIndex = 0;
+      let newChildren: Array<MdxJsxFlowElement | Element> = [];
+      // If there is content before the first Var, separate it into a new hljs
+      // span.
+      if (placeholders[0].index > 0) {
+        newChildren.push({
+          tagName: "span",
+          type: "element",
+          properties: el.properties,
+          children: [
+            {
+              type: "text",
+              value: hljsSpanValue.substring(lastIndex, placeholders[0].index),
+            },
+          ],
+        });
+        lastIndex = placeholders[0].index;
+      }
+      placeholders.forEach((ph, i) => {
+        const placeholderValue = ph[0];
+        newChildren.push(placeholdersToVars[placeholderValue]);
+        lastIndex += placeholderValue.length;
+
+        // Check if there is some non-Var text between either (a) this and the
+        // next Var or (b) between this Var and the end of the content. If
+        // so, add another span and advance the last index.
+        let nextIndex = 0;
+        if (i < placeholders.length - 1) {
+          nextIndex = placeholders[i + 1].index;
+        } else if (i == placeholders.length - 1) {
+          nextIndex = hljsSpanValue.length;
+        }
+        if (lastIndex < nextIndex) {
           newChildren.push({
             tagName: "span",
             type: "element",
             properties: el.properties,
             children: [
               {
                 type: "text",
-                value: hljsSpanValue.substring(
-                  lastIndex,
-                  placeholders[0].index
-                ),
+                value: hljsSpanValue.substring(lastIndex, nextIndex),
               },
             ],
           });
-          lastIndex = placeholders[0].index;
+          lastIndex = nextIndex;
         }
-        placeholders.forEach((ph, i) => {
-          const placeholderValue = ph[0];
-          newChildren.push(placeholdersToVars[placeholderValue]);
-          lastIndex += placeholderValue.length;
-
-          // Check if there is some non-Var text between either (a) this and the
-          // next Var or (b) between this Var and the end of the content. If
-          // so, add another span and advance the last index.
-          let nextIndex = 0;
-          if (i < placeholders.length - 1) {
-            nextIndex = placeholders[i + 1].index;
-          } else if (i == placeholders.length - 1) {
-            nextIndex = hljsSpanValue.length;
-          }
-          if (lastIndex < nextIndex) {
-            newChildren.push({
-              tagName: "span",
-              type: "element",
-              properties: el.properties,
-              children: [
-                {
-                  type: "text",
-                  value: hljsSpanValue.substring(lastIndex, nextIndex),
-                },
-              ],
-            });
-            lastIndex = nextIndex;
-          }
-        });
-        // Delete the current span and replace it with the new children.
-        (parent.children as Array<MdxJsxFlowElement | Element>).splice(
-          index,
-          1,
-          ...newChildren
-        );
-        return [SKIP, index + newChildren.length];
-      }
+      });
+      // Delete the current span and replace it with the new children.
+      (parent.children as Array<MdxJsxFlowElement | Element>).splice(
+        index,
+        1,
+        ...newChildren
+      );
+      return [SKIP, index + newChildren.length];
     });
   };
 };

uvu-tests/rehype-hljs-var.test.ts

@@ -151,9 +151,6 @@ Suite("TODO", () => {
     path: "/docs/index.mdx",
   });
 
-  // Note that, because of rehypeMdxToHast, the <Var> components ending up
-  // having the <var> tag. The MDX configuration in the DocsPage layout maps
-  // this to Var.
   assert.equal(
     (result.value as string).trim(),
     readFileSync(