Fix bug

.changeset/dirty-socks-sip.md

@@ -3,40 +3,30 @@
 'astro': minor
 ---
 
-Adds a configuration called https://shiki.style/guide/load-lang#custom-language-aliases, that allows a non-supported code language to a known language.
+Adds a [`markdown.shikiConfig.langAlias` option](https://shiki.style/guide/load-lang#custom-language-aliases) that allows aliasing a non-supported code language to a known language.
 
-This option requires `langs` to be defined with the correct values. The option will tell shiki which language to load when mapping the alias.
-
-The below example will tell shiki to highlight the code blocks `cjs` using the `javascript` syntax highlighting, The `langs` list will contain the `javascript` language.  
+For example, the below configuration tells shiki to highlight `cjs` code blocks using the `javascript` syntax highlighter:
 
 ```js
-import { defineConfig } from "astro/config";
+import { defineConfig } from 'astro/config';
 
 export default defineConfig({
   markdown: {
     shikiConfig: {
       langAlias: {
-        cjs: "javascript"
+        cjs: 'javascript',
       },
-      langs: ['javascript']
-    }
-  }
-})
+    },
+  },
+});
 ```
 
-``````md
+````md
 ```cjs
-"use strict"
+'use strict';
 
 function commonJs() {
-    return "I am a commonjs file"
+  return 'I am a commonjs file';
 }
 ```
-``````
-
-Failing to define `langs` will result in an error:
-
-```
-Error [ShikiError]: Failed to parse Markdown file "undefined":
-Language `cjs` not found, you may need to load it first 
-```
+````

packages/markdown/remark/src/shiki.ts

@@ -57,15 +57,18 @@ export async function createShikiHighlighter({
 
 	return {
 		async highlight(code, lang = 'plaintext', options) {
+			const resolvedLang = langAlias[lang] ?? lang;
 			const loadedLanguages = highlighter.getLoadedLanguages();
 
-			if (!isSpecialLang(lang) && !loadedLanguages.includes(lang)) {
+			if (!isSpecialLang(lang) && !loadedLanguages.includes(resolvedLang)) {
 				try {
-					await highlighter.loadLanguage(lang as BundledLanguage);
+					await highlighter.loadLanguage(resolvedLang as BundledLanguage);
 				} catch (_err) {
+					const langStr =
+						lang === resolvedLang ? `"${lang}"` : `"${lang}" (aliased to "${resolvedLang}")`;
 					// eslint-disable-next-line no-console
 					console.warn(
-						`[Shiki] The language "${lang}" doesn't exist, falling back to "plaintext".`,
+						`[Shiki] The language ${langStr} doesn't exist, falling back to "plaintext".`,
 					);
 					lang = 'plaintext';
 				}
@@ -123,7 +126,7 @@ export async function createShikiHighlighter({
 							// Add "user-select: none;" for "+"/"-" diff symbols.
 							// Transform `<span class="line"><span style="...">+ something</span></span>
 							// into      `<span class="line"><span style="..."><span style="user-select: none;">+</span> something</span></span>`
-							if (lang === 'diff') {
+							if (resolvedLang === 'diff') {
 								const innerSpanNode = node.children[0];
 								const innerSpanTextNode =
 									innerSpanNode?.type === 'element' && innerSpanNode.children?.[0];

packages/markdown/remark/src/types.ts

@@ -2,12 +2,10 @@ import type * as hast from 'hast';
 import type * as mdast from 'mdast';
 import type { Options as RemarkRehypeOptions } from 'remark-rehype';
 import type {
-	BuiltinLanguage,
 	BuiltinTheme,
 	HighlighterCoreOptions,
 	LanguageRegistration,
 	ShikiTransformer,
-	SpecialLanguage,
 	ThemeRegistration,
 	ThemeRegistrationRaw,
 } from 'shiki';
@@ -39,7 +37,7 @@ export type RemarkRehype = RemarkRehypeOptions;
 export type ThemePresets = BuiltinTheme | 'css-variables';
 
 export interface ShikiConfig {
-	langs?: (LanguageRegistration | BuiltinLanguage | SpecialLanguage)[];
+	langs?: LanguageRegistration[];
 	langAlias?: HighlighterCoreOptions['langAlias'];
 	theme?: ThemePresets | ThemeRegistration | ThemeRegistrationRaw;
 	themes?: Record<string, ThemePresets | ThemeRegistration | ThemeRegistrationRaw>;

packages/markdown/remark/test/shiki.test.js

@@ -107,7 +107,6 @@ describe('shiki syntax highlighting', () => {
 			langAlias: {
 				cjs: 'javascript',
 			},
-			langs: ['javascript'],
 		});
 
 		const html = await highlighter.highlight(`let test = "some string"`, 'cjs', {
@@ -123,7 +122,6 @@ describe('shiki syntax highlighting', () => {
 				langAlias: {
 					cjs: 'javascript',
 				},
-				langs: ['javascript'],
 			},
 		});