feat: support langalias

.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/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__/hook.test.tsx

@@ -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>;
 };
@@ -132,4 +135,26 @@ describe('useShikiHighlighter Hook', () => {
       expect(container).toMatchSnapshot();
     });
   });
+
+  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');
+    });
+  });
 });

package/src/lib/hook.ts

@@ -96,8 +96,13 @@ export const useShikiHighlighter = (
   const [stableOpts, optsRev] = useStableOptions(options);
 
   const { languageId, langsToLoad } = useMemo(
-    () => resolveLanguage(stableLang, stableOpts.customLanguages),
-    [stableLang, stableOpts.customLanguages]
+    () =>
+      resolveLanguage(
+        stableLang,
+        stableOpts.customLanguages as never,
+        stableOpts.langAlias
+      ),
+    [stableLang, stableOpts.customLanguages, stableOpts.langAlias]
   );
 
   const { isMultiTheme, themeId, multiTheme, singleTheme, themesToLoad } =

package/src/lib/resolvers.ts

@@ -1,5 +1,8 @@
 import type { Language, Theme, Themes } from './types';
-import type { ThemeRegistrationAny } from 'shiki/core';
+import type {
+  BundledHighlighterOptions,
+  ThemeRegistrationAny,
+} from 'shiki/core';
 import type { LanguageRegistration } from './extended-types';
 
 /**
@@ -22,7 +25,8 @@ type LanguageResult = {
  */
 export const resolveLanguage = (
   lang: Language,
-  customLanguages?: LanguageRegistration | LanguageRegistration[]
+  customLanguages?: LanguageRegistration | LanguageRegistration[],
+  langAliases?: Record<string, string>
 ): LanguageResult => {
   const normalizedCustomLangs = customLanguages
     ? Array.isArray(customLanguages)
@@ -71,6 +75,15 @@ export const resolveLanguage = (
     };
   }
 
+  // Check if language is aliased
+  if (langAliases && langAliases[lang]) {
+    return {
+      languageId: langAliases[lang],
+      displayLanguageId: lang,
+      langsToLoad: langAliases[lang],
+    };
+  }
+
   // For any other string, pass it through,
   // fallback is handled in highlighter factories
   return {

package/src/lib/types.ts

@@ -8,6 +8,7 @@ import type {
   CodeToHastOptions,
   Highlighter,
   HighlighterCore,
+  BundledHighlighterOptions,
 } from 'shiki';
 
 import type { ReactNode } from 'react';
@@ -123,7 +124,8 @@ interface HighlighterOptions
       CodeOptionsMultipleThemes<BundledTheme>,
       'defaultColor' | 'cssVariablePrefix'
     >,
-    Omit<CodeToHastOptions, 'lang' | 'theme' | 'themes'> {}
+    Omit<CodeToHastOptions, 'lang' | 'theme' | 'themes'>,
+    Pick<BundledHighlighterOptions<string, string>, 'langAlias'> {}
 
 /**
  * State for the throttling logic

pnpm-workspace.yaml

@@ -1,3 +1,6 @@
 packages:
   - package
-  - playground
+  - playground
+onlyBuiltDependencies:
+  - "@biomejs/biome"
+  - esbuild