Merge branch 'color-tags' of https://github.com/TheNextLvl-net/docs into color-tags

Author: NonSwag

bun.lock

@@ -5,6 +5,7 @@
       "name": "thenextlvl-docs",
       "dependencies": {
         "@icons-pack/react-simple-icons": "^13.7.0",
+        "@shikijs/types": "^3.11.0",
         "fumadocs-core": "15.7.0",
         "fumadocs-mdx": "11.8.0",
         "fumadocs-ui": "15.7.0",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@icons-pack/react-simple-icons": "^13.7.0",
+    "@shikijs/types": "^3.11.0",
     "fumadocs-core": "15.7.0",
     "fumadocs-mdx": "11.8.0",
     "fumadocs-ui": "15.7.0",
@@ -32,5 +33,5 @@
     "tailwindcss": "^4.1.12",
     "typescript": "^5.9.2"
   },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  "packageManager": "bun@1.2.20"
 }

src/lib/command-transformer.ts

@@ -100,32 +100,27 @@ export function transformerCommandColor(): ShikiTransformer {
 
         const splitted = line.flatMap((t) => splitTokenAtOffsets(t, bps))
 
-        const styled: ThemedToken[] = splitted.map((seg) => {
-          const inHide = ranges.hides.some(
-            (r) => r.start <= seg.offset && seg.offset + seg.content.length <= r.end,
-          )
-          if (inHide) {
-            return {
-              ...seg,
-              htmlStyle: { ...(seg.htmlStyle || {}), display: "none" },
-            }
-          }
-
-          const contentRange = ranges.contents.find(
-            (r) => r.start <= seg.offset && seg.offset + seg.content.length <= r.end,
-          )
-          if (contentRange) {
-            const cfg = getCommandColor(contentRange.color)
-            if (cfg) {
-              return {
-                ...seg,
-                htmlStyle: { ...(seg.htmlStyle || {}), color: cfg },
+        const styled: ThemedToken[] = splitted
+          .filter((seg) => {
+            return !ranges.hides.some(
+              (r) => r.start <= seg.offset && seg.offset + seg.content.length <= r.end,
+            )
+          })
+          .map((seg) => {
+            const contentRange = ranges.contents.find(
+              (r) => r.start <= seg.offset && seg.offset + seg.content.length <= r.end,
+            )
+            if (contentRange) {
+              const cfg = getCommandColor(contentRange.color)
+              if (cfg) {
+                return {
+                  ...seg,
+                  htmlStyle: { ...(seg.htmlStyle || {}), color: cfg },
+                }
               }
             }
-          }
-
-          return seg
-        })
+            return seg
+          })
 
         return styled
       })