Cleans up some remaining issues

Author: wycats

src/.vitepress/components/Tabs/code-tabs.scss

@@ -3,7 +3,7 @@
 .code-tabs-nav {
   overflow-x: auto;
 
-  margin: 0.85rem 0 -0.85rem;
+  margin: 0.85rem 0 0 0;
   padding: 0;
   border-radius: 6px 6px 0 0;
 
@@ -101,12 +101,13 @@
     display: block;
   }
 
-  div[class*="language-"] {
+  > div[class*="language-"] {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
+    margin: 0;
 
     @media (max-width: 760px) {
-      margin: 0.85rem -1.5rem;
+      margin: 0 -1.5rem;
     }
   }
 }

src/.vitepress/components/code/Code.vue

@@ -123,6 +123,10 @@ function current() {
   opacity: 0;
 }
 
+.vp-doc [class*="language-"] > p.toggler ~ span.lang {
+  display: none;
+}
+
 .lang-switcher p.toggler {
   border: 3px solid var(--vp-button-brand-border);
   background-color: var(--vp-button-alt-bg);

src/.vitepress/plugins/snippets.ts

@@ -107,17 +107,23 @@ export function snippetPlugin(md: MarkdownIt, srcDir: string) {
           return error(`Invalid region name: ${regionName} in ${src}`);
         }
 
+        token.info = "tsx";
         token.content = region.ts.code;
-        token.info = fenceInfo.highlights(region.ts.highlights);
+        token.attrs = fenceInfo.asAttr(region.ts.highlights);
 
         if (region.ts.code === region.js.code) {
+          console.log("both", token);
+
           return `<section class="both-lang">${fence(...args)}</section>`;
         }
 
         const tsFenced = fence(...args);
 
+        token.info = "tsx";
         token.content = region.js.code;
-        token.info = fenceInfo.highlights(region.js.highlights);
+        token.attrs = fenceInfo.asAttr(region.js.highlights);
+        console.log("js", token);
+
         const jsFenced = fence(...args);
 
         return `<Code><template #ts>${tsFenced}</template><template #js>${jsFenced}</template></Code>`;
@@ -131,11 +137,9 @@ export function snippetPlugin(md: MarkdownIt, srcDir: string) {
       }
 
       token.content = snippet.ts.code;
-
       const tsFenced = fence(...args);
 
       token.content = snippet.js.code;
-      token.info = `ts${token.info.slice(3)}`;
       const jsFenced = fence(...args);
 
       return `<Code><template #ts>${tsFenced}</template><template #js>${jsFenced}</template></Code>`;
@@ -174,15 +178,19 @@ class FenceInfo {
     this.#original = original;
   }
 
-  highlights(highlights: Highlight[]) {
-    if (highlights.length === 0) {
-      return `ts`;
-    } else {
-      return `ts{${highlights
-        .map((h) => h.lines)
-        .join(",")}}${this.#original.slice(3)}`;
-    }
+  asAttr(highlights: Highlight[]): [string, string][] {
+    return [[highlights.map((h) => h.lines).join(","), ""]];
   }
+
+  // highlights(highlights: Highlight[]) {
+  //   if (highlights.length === 0) {
+  //     return `ts`;
+  //   } else {
+  //     return `ts{${highlights
+  //       .map((h) => h.lines)
+  //       .join(",")}}${this.#original.slice(3)}`;
+  //   }
+  // }
 }
 
 function error(message: string) {