[pull] main from withastro:main

.changeset/tangy-tables-jog.md

@@ -0,0 +1,25 @@
+---
+'astro': minor
+---
+
+Adds a new optional `embeddedLangs` prop to the `<Code />` component to support languages beyond the primary `lang`
+
+This allows, for example, highlighting `.vue` files with a `<script setup lang="tsx">` block correctly:
+
+```astro
+---
+import {Code} from 'astro:components';
+
+const code = `
+<script setup lang="tsx">
+const Text = ({ text }: { text: string }) => <div>{text}</div>;
+</script>
+
+<template>
+  <Text text="hello world" />
+</template>`
+---
+<Code {code} lang="vue" embeddedLangs={["tsx"]} />
+```
+
+See the [`<Code />` component documentation](https://v6.docs.astro.build/en/guides/syntax-highlighting/#code-) for more details.

README.md

@@ -27,7 +27,7 @@ npm create astro@latest
 You can also install Astro **manually** by running this command instead:
 
 ```bash
-npm install --save-dev astro
+npm install astro
 ```
 
 Looking for help? Start with our [Getting Started](https://docs.astro.build/en/getting-started/) guide.

packages/astro/README.md

@@ -15,7 +15,7 @@
 npm create astro@latest
 
 # Manual:
-npm install --save-dev astro
+npm install astro
 ```
 
 Looking for help? Start with our [Getting Started](https://docs.astro.build/en/getting-started/) guide.

packages/astro/components/Code.astro

@@ -16,6 +16,14 @@ interface Props extends Omit<HTMLAttributes<'pre'>, 'lang'> {
 	 * @default "plaintext"
 	 */
 	lang?: CodeLanguage;
+	/**
+	 * Additional languages to load.
+	 * Useful if `code` embeds languages not included by the given `lang`
+	 * For example, TSX in Vue
+	 *
+	 * @default []
+	 */
+	embeddedLangs?: CodeLanguage[];
 	/**
 	 * A metastring to pass to the highlighter.
 	 * Allows passing information to transformers: https://shiki.style/guide/transformers#meta
@@ -72,6 +80,7 @@ interface Props extends Omit<HTMLAttributes<'pre'>, 'lang'> {
 const {
 	code,
 	lang = 'plaintext',
+	embeddedLangs = [],
 	meta,
 	theme = 'github-dark',
 	themes = {},
@@ -101,6 +110,7 @@ const highlighter = await createShikiHighlighter({
 				? lang
 				: 'plaintext'
 			: (lang as any),
+		...embeddedLangs,
 	],
 	theme,
 	themes,

packages/astro/test/astro-component-code.test.js

@@ -121,4 +121,10 @@ describe('<Code>', () => {
 		assert.match(codeEl.attr('style'), /background-color:/);
 		assert.equal($('pre').length, 0);
 	});
+
+	it('<Code embeddedLangs /> tokenizes TSX', async () => {
+		const html = await fixture.readFile('/langs/index.html');
+		const $ = cheerio.load(html);
+		assert.ok([...$('.line > span')].some((el) => $(el).text().trim() === 'const'));
+	});
 });

packages/astro/test/fixtures/astro-component-code/src/pages/langs.astro

@@ -0,0 +1,12 @@
+---
+import {Code} from 'astro:components';
+
+const code = `<script setup lang="tsx">
+const Text = ({ text }: { text: string }) => <div>{text}</div>;
+</script>
+
+<template>
+  <Text text="hello world" />
+</template>`
+---
+<Code {code} lang="vue" embeddedLangs={["tsx"]} />