feat: update line numbers transformer with activateByDefault option and update docs

Author: pheralb

apps/website/src/docs/shiki/line-numbers.mdx

@@ -64,7 +64,7 @@ export { rehypeShikiOptions };
 
 1. Import the transformer in your [`highlight()`](/docs/shiki/highlighter):
 
-```ts {2,8} title="Using lineNumbers with highlighter"
+```ts {2,8} title="Usage with highlighter"
 import { highlight } from "@/utils/shiki";
 import { showLineNumbers } from "@/utils/shiki/transformers/show-line-numbers";
 
@@ -85,3 +85,13 @@ const html = highlighter.codeToHtml(code, {
   </code>
 </pre>
 ```
+
+## Properties
+
+### ``activateByDefault``
+
+By default, line numbers are only shown when the `lineNumbers` meta property is present in the MDX code block. You can activate line numbers for all code blocks by default by passing the `activateByDefault` option to the transformer:
+
+```ts title="Activating Line Numbers by Default"
+showLineNumbers({ activateByDefault: true })
+```

apps/website/src/styles/shiki.css

@@ -42,16 +42,12 @@ pre.shiki-word-wrap span.line {
 pre.shiki-line-numbers code {
   counter-reset: step;
   counter-increment: step 0;
-}
-
-pre.shiki-line-numbers code:has(.line:nth-child(2)) .line::before {
-  content: counter(step);
-  counter-increment: step;
-  width: 0.5rem;
-  margin-right: 1.3rem;
-  margin-left: 0.2rem;
-  display: inline-block;
-  @apply text-right font-mono text-xs text-neutral-500;
+  .line {
+    &::before {
+      counter-increment: step;
+      @apply mr-6 inline-block border-transparent text-right text-xs whitespace-nowrap text-neutral-500 content-[counter(step)];
+    }
+  }
 }
 
 /* Shiki Highlight */

apps/website/src/utils/shiki/transformers/show-line-numbers.ts

@@ -1,23 +1,43 @@
 import type { ShikiTransformer } from "shiki";
 
-const showLineNumbers = (): ShikiTransformer => {
+interface ShowLineNumbersOptions {
+  /**
+   * Always show line numbers regardless of meta properties
+   * @default false
+   */
+  activateByDefault?: boolean;
+}
+
+const showLineNumbers = (
+  options: ShowLineNumbersOptions = {},
+): ShikiTransformer => {
+  const { activateByDefault = false } = options;
+
   return {
     name: "AddLineNumbers",
     pre(node) {
       const rawMeta = this.options.meta?.__raw;
-      const addLineNumbers = rawMeta?.includes("lineNumbers") || false;
+      const hasLineNumbersMeta = rawMeta?.includes("lineNumbers") ?? false;
+      const addLineNumbers = activateByDefault || hasLineNumbersMeta;
 
       if (!addLineNumbers) {
         return;
       }
 
       const existingClass = node.properties.class;
+      const className = "shiki-line-numbers";
+
       if (Array.isArray(existingClass)) {
-        existingClass.push("shiki-line-numbers");
+        if (!existingClass.includes(className)) {
+          existingClass.push(className);
+        }
       } else if (typeof existingClass === "string") {
-        node.properties.class = `${existingClass} shiki-line-numbers`;
+        const classes = existingClass.split(" ");
+        if (!classes.includes(className)) {
+          node.properties.class = `${existingClass} ${className}`;
+        }
       } else {
-        node.properties.class = "shiki-line-numbers";
+        node.properties.class = [className];
       }
     },
   };