feat: Added the ability to add custom themes/languages to Shiki

.changeset/nasty-lions-exist.md

@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/markdown-remark': patch
+---
+
+Added the ability to use custom themes and langs with Shiki (`<Code />` and `@astrojs/markdown-remark`)

.changeset/serious-glasses-taste.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/markdown-remark': patch
+---
+
+Added `wrap` to Shiki config

docs/src/pages/en/guides/markdown-content.md

@@ -97,14 +97,21 @@ export default {
       {
         // Pick a syntax highlighter. Can be 'prism' (default), 'shiki' or false to disable any highlighting.
         syntaxHighlight: 'prism',
-        // If you are using shiki, here you can define a global theme.
-        shikiTheme: 'github-dark',
+        // If you are using shiki, here you can define a global theme and
+        // add custom languages.
+        shikiConfig: {
+          theme: 'github-dark',
+          langs: [],
+          wrap: false,
+        },
       },
     ],
   },
 };
 ```
 
+You can read more about custom Shiki [themes](https://github.com/shikijs/shiki/blob/main/docs/themes.md#loading-theme) and [languages](https://github.com/shikijs/shiki/blob/main/docs/languages.md#supporting-your-own-languages-with-shiki).
+
 ## Markdown Pages
 
 Astro treats any `.md` files inside of the `/src/pages` directory as pages. These files can contain frontmatter, but are otherwise processed as plain markdown files and do not support components. If you're looking to embed rich components in your markdown, take a look at the [Markdown Component](#astros-markdown-component) section.

docs/src/pages/en/reference/builtin-components.md

@@ -19,7 +19,7 @@ import { Code } from 'astro/components';
 <Code code={`const foo = 'bar';`} lang="js" wrap />
 ```
 
-This component provides syntax highlighting for code blocks at build time (no client-side JavaScript included). The component is powered internally by shiki and it supports all popular [themes](https://github.com/shikijs/shiki/blob/main/docs/themes.md) and [languages](https://github.com/shikijs/shiki/blob/main/docs/languages.md).
+This component provides syntax highlighting for code blocks at build time (no client-side JavaScript included). The component is powered internally by shiki and it supports all popular [themes](https://github.com/shikijs/shiki/blob/main/docs/themes.md) and [languages](https://github.com/shikijs/shiki/blob/main/docs/languages.md). Plus, you can add your custom themes and languages by passing them to `theme` and `lang` respectively.
 
 You can also use the `<Prism />` component for syntax highlighting powered by the [Prism](https://prismjs.com/) syntax highlighting library. This is the library that Astro's Markdown uses by default. However, we will be transitioning all usage over to `<Code>` as we move towards our v1.0 release.
 

examples/with-markdown-shiki/astro.config.mjs

@@ -15,7 +15,11 @@ export default /** @type {import('astro').AstroUserConfig} */ ({
 			astroRemark,
 			{
 				syntaxHighlight: 'shiki',
-				shikiTheme: 'dracula',
+				shikiConfig: {
+					theme: 'dracula',
+					// Learn more about this configuration here:
+					// https://docs.astro.build/en/guides/markdown-content/#syntax-highlighting
+				},
 			},
 		],
 	},

packages/astro/components/Code.astro

@@ -5,21 +5,28 @@ export interface Props {
 	/** The code to highlight. Required. */
 	code: string;
 	/**
-	 * The language of your code. Defaults to "plaintext".
-	 * Supports all languages listed here: https://github.com/shikijs/shiki/blob/main/docs/themes.md
+	 * The language of your code.
+	 * Supports all languages listed here: https://github.com/shikijs/shiki/blob/main/docs/languages.md#all-languages
+	 * Instructions for loading a custom language: https://github.com/shikijs/shiki/blob/main/docs/languages.md#supporting-your-own-languages-with-shiki
+	 *
+	 * @default "plaintext"
 	 */
-	lang?: string;
+	lang?: shiki.Lang | shiki.ILanguageRegistration;
 	/**
-	 * The styling theme. Defaults to "github-dark".
-	 * Supports all themes listed here: https://github.com/shikijs/shiki/blob/main/docs/themes.md
+	 * The styling theme.
+	 * Supports all themes listed here: https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes
 	 * Instructions for loading a custom theme: https://github.com/shikijs/shiki/blob/main/docs/themes.md#loading-theme
+	 *
+	 * @default "github-dark"
 	 */
-	theme?: string;
+	theme?: shiki.IThemeRegistration;
 	/**
-	 * Enable word wrapping. Defaults to "false".
+	 * Enable word wrapping.
 	 *  - true: enabled.
 	 *  - false: enabled.
 	 *  - null: All overflow styling removed. Code will overflow the element by default.
+	 *
+	 * @default false
 	 */
 	wrap?: boolean | null;
 }
@@ -42,8 +49,12 @@ function repairShikiTheme(html: string): string {
 	return html;
 }
 
-const highlighter = await shiki.getHighlighter({ theme });
-const _html = highlighter.codeToHtml(code, { lang });
+const highlighter = await shiki.getHighlighter({ 
+	theme,
+	// Load custom lang if passed an object, otherwise load the default
+	langs: typeof lang !== 'string' ? [lang] : undefined
+});
+const _html = highlighter.codeToHtml(code, { lang: typeof lang === 'string' ? lang : lang.id });
 const html = repairShikiTheme(_html);
 ---
 

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

@@ -9,7 +9,7 @@ before(async () => {
 	await fixture.build();
 });
 
-describe('<Code', () => {
+describe('<Code>', () => {
 	it('<Code> without lang or theme', async () => {
 		let html = await fixture.readFile('/no-lang/index.html');
 		const $ = cheerio.load(html);
@@ -81,4 +81,15 @@ describe('<Code', () => {
 			'color: var(--astro-code-color-text)',
 		]);
 	});
+
+	it('<Code> with custom theme and lang', async () => {
+		let html = await fixture.readFile('/imported/index.html');
+		const $ = cheerio.load(html);
+
+		expect($('#theme > pre')).to.have.lengthOf(1);
+		expect($('#theme > pre').attr('style'), 'background-color: #FDFDFE; overflow-x: auto;');
+
+		expect($('#lang > pre')).to.have.lengthOf(1);
+		expect($('#lang > pre > code span').length).to.equal(3);
+	});
 });

packages/astro/test/astro-markdown-shiki.test.js

@@ -1,53 +1,206 @@
 import { expect } from 'chai';
 import cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
-import markdownRemark from '@astrojs/markdown-remark';
 
 describe('Astro Markdown Shiki', () => {
-	let fixture;
-
-	before(async () => {
-		fixture = await loadFixture({
-			projectRoot: './fixtures/astro-markdown-shiki/',
-			markdownOptions: {
-				render: [
-					markdownRemark,
-					{
-						syntaxHighlight: 'shiki',
-						shikiTheme: 'github-light',
-					},
-				],
-			},
-			buildOptions: {
-				sitemap: false,
-			},
-		});
-		await fixture.build();
+	describe('Render shiki', () => {
+		let fixture;
+
+		before(async () => {
+			fixture = await loadFixture({ projectRoot: './fixtures/astro-markdown-shiki/normal/' });
+			await fixture.build();
+		});
+
+		it('Can render markdown with shiki', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
+
+			// There should be no HTML from Prism
+			expect($('.token')).to.have.lengthOf(0);
+
+			expect($('pre')).to.have.lengthOf(1);
+			expect($('pre').hasClass('astro-code')).to.equal(true);
+			expect($('pre').attr().style).to.equal('background-color: #0d1117; overflow-x: auto;');
+		});
+
+		it('Can render Astro <Markdown> with shiki', async () => {
+			const html = await fixture.readFile('/astro/index.html');
+			const $ = cheerio.load(html);
+
+			// There should be no HTML from Prism
+			expect($('.token')).to.have.lengthOf(0);
+
+			expect($('pre')).to.have.lengthOf(2);
+
+			expect($('span.line')).to.have.lengthOf(2);
+			expect($('span.line').get(0).children).to.have.lengthOf(1);
+			expect($('span.line').get(1).children).to.have.lengthOf(5);
+		});
 	});
 
-	it('Can render markdown with shiki', async () => {
-		const html = await fixture.readFile('/index.html');
-		const $ = cheerio.load(html);
+	describe('Themes', () => {
+		describe('Integrated theme', async () => {
+			let fixture;
+
+			before(async () => {
+				fixture = await loadFixture({ projectRoot: './fixtures/astro-markdown-shiki/themes-integrated/' });
+				await fixture.build();
+			});
+
+			it('Markdown file', async () => {
+				const html = await fixture.readFile('/index.html');
+				const $ = cheerio.load(html);
+
+				expect($('pre')).to.have.lengthOf(1);
+				expect($('pre').hasClass('astro-code')).to.equal(true);
+				expect($('pre').attr().style).to.equal('background-color: #ffffff; overflow-x: auto;');
+			});
 
-		// There should be no HTML from Prism
-		expect($('.token')).to.have.lengthOf(0);
+			it('<Markdown /> component', async () => {
+				const html = await fixture.readFile('/astro/index.html');
+				const $ = cheerio.load(html);
 
-		expect($('pre')).to.have.lengthOf(1);
-		expect($('pre').hasClass('astro-code')).to.equal(true);
-		expect($('pre').attr().style).to.equal('background-color: #ffffff');
+				expect($('pre')).to.have.lengthOf(1);
+				expect($('pre').hasClass('astro-code')).to.equal(true);
+				expect($('pre').attr().style).to.equal('background-color: #ffffff; overflow-x: auto;');
+			});
+		});
+
+		describe('Custom theme', async () => {
+			let fixture;
+
+			before(async () => {
+				fixture = await loadFixture({ projectRoot: './fixtures/astro-markdown-shiki/themes-custom/' });
+				await fixture.build();
+			});
+
+			it('Markdown file', async () => {
+				const html = await fixture.readFile('/index.html');
+				const $ = cheerio.load(html);
+
+				expect($('pre')).to.have.lengthOf(1);
+				expect($('pre').hasClass('astro-code')).to.equal(true);
+				expect($('pre').attr().style).to.equal('background-color: #FDFDFE; overflow-x: auto;');
+			});
+
+			it('<Markdown /> component', async () => {
+				const html = await fixture.readFile('/astro/index.html');
+				const $ = cheerio.load(html);
+
+				expect($('pre')).to.have.lengthOf(1);
+				expect($('pre').hasClass('astro-code')).to.equal(true);
+				expect($('pre').attr().style).to.equal('background-color: #FDFDFE; overflow-x: auto;');
+			});
+		});
 	});
 
-	it('Can render Astro <Markdown> with shiki', async () => {
-		const html = await fixture.readFile('/astro/index.html');
-		const $ = cheerio.load(html);
+	describe('Custom langs', () => {
+		let fixture;
+
+		before(async () => {
+			fixture = await loadFixture({ projectRoot: './fixtures/astro-markdown-shiki/langs/' });
+			await fixture.build();
+		});
 
-		// There should be no HTML from Prism
-		expect($('.token')).to.have.lengthOf(0);
+		it('Markdown file', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
 
-		expect($('pre')).to.have.lengthOf(2);
+			const segments = $('.line').get(6).children;
+			expect(segments).to.have.lengthOf(3);
+			expect(segments[0].attribs.style).to.be.equal('color: #C9D1D9');
+			expect(segments[1].attribs.style).to.be.equal('color: #79C0FF');
+			expect(segments[2].attribs.style).to.be.equal('color: #C9D1D9');
+		});
 
-		expect($('span.line')).to.have.lengthOf(2);
-		expect($('span.line').get(0).children).to.have.lengthOf(1);
-		expect($('span.line').get(1).children).to.have.lengthOf(5);
+		it('<Markdown /> component', async () => {
+			const html = await fixture.readFile('/astro/index.html');
+			const $ = cheerio.load(html);
+
+			const segments = $('.line').get(6).children;
+			expect(segments).to.have.lengthOf(2);
+			expect(segments[0].attribs.style).to.be.equal('color: #79C0FF');
+			expect(segments[1].attribs.style).to.be.equal('color: #C9D1D9');
+		});
+	});
+
+	describe('Wrap', () => {
+		describe('wrap = true', () => {
+			const style = 'background-color: #0d1117; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;';
+			let fixture;
+
+			before(async () => {
+				fixture = await loadFixture({ projectRoot: './fixtures/astro-markdown-shiki/wrap-true/' });
+				await fixture.build();
+			});
+
+			it('Markdown file', async () => {
+				const html = await fixture.readFile('/index.html');
+				const $ = cheerio.load(html);
+
+				expect($('pre')).to.have.lengthOf(1);
+				expect($('pre').attr('style')).to.equal(style);
+			});
+
+			it('<Markdown /> component', async () => {
+				const html = await fixture.readFile('/astro/index.html');
+				const $ = cheerio.load(html);
+
+				expect($('pre').get(0).attribs.style).to.equal(style);
+				expect($('pre').get(1).attribs.style).to.equal(style);
+			});
+		});
+	});
+
+	describe('wrap = false', () => {
+		const style = 'background-color: #0d1117; overflow-x: auto;';
+		let fixture;
+
+		before(async () => {
+			fixture = await loadFixture({ projectRoot: './fixtures/astro-markdown-shiki/wrap-false/' });
+			await fixture.build();
+		});
+
+		it('Markdown file', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
+
+			expect($('pre')).to.have.lengthOf(1);
+			expect($('pre').attr('style')).to.equal(style);
+		});
+
+		it('<Markdown /> component', async () => {
+			const html = await fixture.readFile('/astro/index.html');
+			const $ = cheerio.load(html);
+
+			expect($('pre').get(0).attribs.style).to.equal(style);
+			expect($('pre').get(1).attribs.style).to.equal(style);
+		});
+	});
+
+	describe('wrap = null', () => {
+		const style = 'background-color: #0d1117';
+		let fixture;
+
+		before(async () => {
+			fixture = await loadFixture({ projectRoot: './fixtures/astro-markdown-shiki/wrap-null/' });
+			await fixture.build();
+		});
+
+		it('Markdown file', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
+
+			expect($('pre')).to.have.lengthOf(1);
+			expect($('pre').attr('style')).to.equal(style);
+		});
+
+		it('<Markdown /> component', async () => {
+			const html = await fixture.readFile('/astro/index.html');
+			const $ = cheerio.load(html);
+
+			expect($('pre').get(0).attribs.style).to.equal(style);
+			expect($('pre').get(1).attribs.style).to.equal(style);
+		});
 	});
 });