feat(markdown): add support for shiki option langAlias

.changeset/dirty-socks-sip.md

@@ -0,0 +1,42 @@
+---
+'@astrojs/markdown-remark': minor
+'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.
+
+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.  
+
+```js
+import { defineConfig } from "astro/config";
+
+export default defineConfig({
+  markdown: {
+    shikiConfig: {
+      langAlias: {
+        cjs: "javascript"
+      },
+      langs: ['javascript']
+    }
+  }
+})
+```
+
+``````md
+```cjs
+"use strict"
+
+function commonJs() {
+    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/astro/src/core/config/schema.ts

@@ -311,6 +311,10 @@ export const AstroConfigSchema = z.object({
 							return langs;
 						})
 						.default([]),
+					langAlias: z
+						.record(z.string(), z.string())
+						.optional()
+						.default(ASTRO_CONFIG_DEFAULTS.markdown.shikiConfig.langAlias!),
 					theme: z
 						.enum(Object.keys(bundledThemes) as [BuiltinTheme, ...BuiltinTheme[]])
 						.or(z.custom<ShikiTheme>())

packages/markdown/remark/src/index.ts

@@ -37,6 +37,7 @@ export const markdownConfigDefaults: Required<AstroMarkdownOptions> = {
 		themes: {},
 		wrap: false,
 		transformers: [],
+		langAlias: {},
 	},
 	remarkPlugins: [],
 	rehypePlugins: [],

packages/markdown/remark/src/shiki.ts

@@ -45,11 +45,13 @@ export async function createShikiHighlighter({
 	defaultColor,
 	wrap = false,
 	transformers = [],
+	langAlias = {},
 }: ShikiConfig = {}): Promise<ShikiHighlighter> {
 	theme = theme === 'css-variables' ? cssVariablesTheme() : theme;
 
 	const highlighter = await getHighlighter({
 		langs: ['plaintext', ...langs],
+		langAlias,
 		themes: Object.values(themes).length ? Object.values(themes) : [theme],
 	});
 

packages/markdown/remark/src/types.ts

@@ -3,6 +3,7 @@ import type * as mdast from 'mdast';
 import type { Options as RemarkRehypeOptions } from 'remark-rehype';
 import type {
 	BuiltinTheme,
+	HighlighterCoreOptions,
 	LanguageRegistration,
 	ShikiTransformer,
 	ThemeRegistration,
@@ -36,7 +37,8 @@ export type RemarkRehype = RemarkRehypeOptions;
 export type ThemePresets = BuiltinTheme | 'css-variables';
 
 export interface ShikiConfig {
-	langs?: LanguageRegistration[];
+	langs?: (LanguageRegistration | string)[];
+	langAlias?: HighlighterCoreOptions['langAlias'];
 	theme?: ThemePresets | ThemeRegistration | ThemeRegistrationRaw;
 	themes?: Record<string, ThemePresets | ThemeRegistration | ThemeRegistrationRaw>;
 	defaultColor?: 'light' | 'dark' | string | false;

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

@@ -101,4 +101,34 @@ describe('shiki syntax highlighting', () => {
 		// Doesn't have `color` or `background-color` properties.
 		assert.doesNotMatch(code, /color:/);
 	});
+
+	it('the highlighter supports lang alias', async () => {
+		const highlighter = await createShikiHighlighter({
+			langAlias: {
+				cjs: 'javascript',
+			},
+			langs: ['javascript']
+		});
+
+		const html = await highlighter.highlight(`let test = "some string"`, 'cjs', {
+			attributes: { 'data-foo': 'bar', autofocus: true },
+		});
+
+		assert.match(html, /data-language="cjs"/);
+	});
+
+	it('the markdown processsor support lang alias', async () => {
+		const processor = await createMarkdownProcessor({
+			shikiConfig: {
+				langAlias: {
+					cjs: 'javascript',
+				},
+				langs: ['javascript']
+			},
+		});
+
+		const { code } = await processor.render('```cjs\nlet foo = "bar"\n```');
+
+		assert.match(code, /data-language="cjs"/);
+	});
 });