feat: support langAlias option (#68)

support `langAlias` option

also updates and improves tests

---------

Co-authored-by: Bassim Shahidy <122117267+AVGVSTVS96@users.noreply.github.com>

Author: juliusmarminge

.changeset/yellow-fishes-march.md

@@ -0,0 +1,5 @@
+---
+"react-shiki": patch
+---
+
+feat: support langAlias option

.github/workflows/build.yml

@@ -14,8 +14,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
-        with:
-          version: 10.4.0
 
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4

package.json

@@ -24,11 +24,5 @@
     "changesets-changelog-clean": "^1.3.0",
     "typescript": "^5.8.2"
   },
-  "packageManager": "pnpm@10.4.0",
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "@biomejs/biome",
-      "esbuild"
-    ]
-  }
+  "packageManager": "pnpm@10.12.1"
 }

package/README.md

@@ -157,6 +157,7 @@ See [Shiki - RegExp Engines](https://shiki.style/guide/regex-engines) for more i
 | `theme`             | `string \| object` | `'github-dark'` | Single or multi-theme configuration, built-in or custom textmate theme object |
 | `delay`             | `number`           | `0`             | Delay between highlights (in milliseconds)                                    |
 | `customLanguages`   | `array`            | `[]`            | Array of custom languages to preload                                          |
+| `langAlias`         | `object`           | `{}`            | Map of language aliases                                                       |
 | `showLineNumbers`   | `boolean`          | `false`         | Display line numbers alongside code                                           |
 | `startingLineNumber` | `number`           | `1`             | Starting line number when line numbers are enabled                           |
 | `transformers`      | `array`            | `[]`            | Custom Shiki transformers for modifying the highlighting output               |
@@ -273,6 +274,26 @@ const highlightedCode = useShikiHighlighter(code, "typescript", "github-dark", {
 });
 ```
 
+### Language Aliases
+
+You can define custom aliases for languages using the `langAlias` option. This is useful when you want to use alternative names for languages:
+
+```tsx
+// Component
+<ShikiHighlighter 
+  language="indents" 
+  theme="github-dark" 
+  langAlias={{ indents: "python" }}
+>
+  {code.trim()}
+</ShikiHighlighter>
+
+// Hook
+const highlightedCode = useShikiHighlighter(code, "indents", "github-dark", {
+  langAlias: { indents: "python" },
+});
+```
+
 ### Custom Transformers
 
 ```tsx

package/package.json

@@ -26,10 +26,7 @@
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "src/lib/styles.css"
-  ],
+  "files": ["dist", "src/lib/styles.css"],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/__tests__/__snapshots__/component.test.tsx.snap

@@ -102,28 +102,6 @@ describe('ShikiHighlighter Component', () => {
     });
   });
 
-  test('matches snapshot for complex language input', async () => {
-    const complexCode = `
-function greet(name) {
-  console.log('Hello, ' + name);
-}
-greet('World');
-    `.trim();
-
-    const { container } = render(
-      <ShikiHighlighter language="javascript" theme="github-light">
-        {complexCode}
-      </ShikiHighlighter>
-    );
-
-    await waitFor(() => {
-      const outerContainer = container.querySelector(
-        '[data-testid="shiki-container"]'
-      );
-      expect(outerContainer).toMatchSnapshot();
-    });
-  });
-
   test('applies custom transformers and custom styling props', async () => {
     const customCode = 'console.log("Custom transformer test");';
     // Transformer that adds a custom attribute to the <pre> tag.

package/src/__tests__/__snapshots__/hook.test.tsx.snap

@@ -10,16 +10,19 @@ interface TestComponentProps {
   theme: Theme;
   transformers?: ShikiTransformer[];
   tabindex?: string;
+  langAlias?: Record<string, string>;
 }
 
 const TestComponent = ({
   code,
   language,
   theme,
   transformers,
+  langAlias,
 }: TestComponentProps) => {
   const highlighted = useShikiHighlighter(code, language, theme, {
     transformers,
+    langAlias,
   });
   return <div data-testid="highlighted">{highlighted}</div>;
 };
@@ -36,37 +39,22 @@ describe('useShikiHighlighter Hook', () => {
     return render(<TestComponent {...defaultProps} />);
   };
 
-  test('renders pre element with correct theme classes', async () => {
+  test('renders correct DOM structure', async () => {
     const { getByTestId } = renderComponent();
     await waitFor(() => {
       const container = getByTestId('highlighted');
+
+      // Check pre element with theme classes
       const preElement = container.querySelector(
         'pre.shiki.github-light'
       );
       expect(preElement).toBeInTheDocument();
-    });
-  });
 
-  test('renders code element inside pre element', async () => {
-    const { getByTestId } = renderComponent();
-    await waitFor(() => {
-      const container = getByTestId('highlighted');
-      const preElement = container.querySelector(
-        'pre.shiki.github-light'
-      );
+      // Check code element inside pre
       const codeElement = preElement?.querySelector('code');
       expect(codeElement).toBeInTheDocument();
-    });
-  });
 
-  test('renders line spans inside code element', async () => {
-    const { getByTestId } = renderComponent();
-    await waitFor(() => {
-      const container = getByTestId('highlighted');
-      const preElement = container.querySelector(
-        'pre.shiki.github-light'
-      );
-      const codeElement = preElement?.querySelector('code');
+      // Check line spans inside code
       const lineSpan = codeElement?.querySelector('span.line');
       expect(lineSpan).toBeInTheDocument();
     });
@@ -124,12 +112,47 @@ describe('useShikiHighlighter Hook', () => {
     });
   });
 
-  test('matches snapshot for hook rendered output for known language', async () => {
-    const code = '<div>Hello World</div>';
-    const { getByTestId } = renderComponent({ code });
+  test('applies highlighting on aliased language', async () => {
+    const code = 'package main';
+    const { getByTestId } = renderComponent({
+      code,
+      language: 'golang',
+      langAlias: {
+        golang: 'go',
+      },
+    });
+
+    await waitFor(() => {
+      const container = getByTestId('highlighted');
+      const preElement = container.querySelector('pre');
+      const spanElement = preElement?.querySelector(
+        'code>span>span'
+      ) as HTMLSpanElement | null;
+
+      expect(spanElement).toBeInTheDocument();
+      expect(spanElement).toHaveStyle('color: #D73A49');
+    });
+  });
+
+  test('handles multiple language aliases', async () => {
+    const code = 'def hello():\n    print("world")';
+    const { getByTestId } = renderComponent({
+      code,
+      language: 'indents',
+      langAlias: {
+        indents: 'python',
+      },
+    });
+
     await waitFor(() => {
       const container = getByTestId('highlighted');
-      expect(container).toMatchSnapshot();
+      const preElement = container.querySelector('pre');
+      const defKeyword = Array.from(
+        preElement?.querySelectorAll('span') || []
+      ).find((span) => span.textContent === 'def');
+
+      expect(defKeyword).toBeInTheDocument();
+      expect(defKeyword).toHaveStyle('color: #D73A49');
     });
   });
 });

package/src/__tests__/component.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import { ShikiHighlighter } from '../index';
 
 describe('Line Numbers', () => {
@@ -14,14 +14,14 @@ describe('Line Numbers', () => {
       </ShikiHighlighter>
     );
 
-    // Wait for highlighting to complete
-    await new Promise((resolve) => setTimeout(resolve, 100));
+    await waitFor(() => {
+      const containerElement =
+        container.querySelector('#shiki-container');
+      expect(containerElement).not.toHaveClass('has-line-numbers');
 
-    const container_element = container.querySelector('#shiki-container');
-    expect(container_element).not.toHaveClass('has-line-numbers');
-
-    const lineElements = container.querySelectorAll('.line-numbers');
-    expect(lineElements).toHaveLength(0);
+      const lineElements = container.querySelectorAll('.line-numbers');
+      expect(lineElements).toHaveLength(0);
+    });
   });
 
   it('should show line numbers when enabled', async () => {
@@ -35,14 +35,13 @@ describe('Line Numbers', () => {
       </ShikiHighlighter>
     );
 
-    // Wait for highlighting to complete
-    await new Promise((resolve) => setTimeout(resolve, 100));
-
-    const codeElement = container.querySelector('code');
-    expect(codeElement).toHaveClass('has-line-numbers');
+    await waitFor(() => {
+      const codeElement = container.querySelector('code');
+      expect(codeElement).toHaveClass('has-line-numbers');
 
-    const lineElements = container.querySelectorAll('.line-numbers');
-    expect(lineElements.length).toBeGreaterThan(0);
+      const lineElements = container.querySelectorAll('.line-numbers');
+      expect(lineElements.length).toBeGreaterThan(0);
+    });
   });
 
   it('should set custom starting line number', async () => {
@@ -57,17 +56,16 @@ describe('Line Numbers', () => {
       </ShikiHighlighter>
     );
 
-    // Wait for highlighting to complete
-    await new Promise((resolve) => setTimeout(resolve, 100));
-
-    // Check which elements have the style attribute
-    const elementsWithStyle = container.querySelectorAll(
-      '[style*="--line-start"]'
-    );
-    expect(elementsWithStyle.length).toBeGreaterThan(0);
-    expect(elementsWithStyle[0]?.getAttribute('style')).toContain(
-      '--line-start: 42'
-    );
+    await waitFor(() => {
+      // Check which elements have the style attribute
+      const elementsWithStyle = container.querySelectorAll(
+        '[style*="--line-start"]'
+      );
+      expect(elementsWithStyle.length).toBeGreaterThan(0);
+      expect(elementsWithStyle[0]?.getAttribute('style')).toContain(
+        '--line-start: 42'
+      );
+    });
   });
 
   it('should not set line-start CSS variable when starting from 1', async () => {
@@ -82,12 +80,11 @@ describe('Line Numbers', () => {
       </ShikiHighlighter>
     );
 
-    // Wait for highlighting to complete
-    await new Promise((resolve) => setTimeout(resolve, 100));
-
-    const elementsWithStyle = container.querySelectorAll(
-      '[style*="--line-start"]'
-    );
-    expect(elementsWithStyle.length).toBe(0);
+    await waitFor(() => {
+      const elementsWithStyle = container.querySelectorAll(
+        '[style*="--line-start"]'
+      );
+      expect(elementsWithStyle.length).toBe(0);
+    });
   });
 });