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/fixtures/astro-component-code/src/assets/ri.tmLanguage.json

@@ -0,0 +1,95 @@
+{
+  "name": "rinfo",
+  "patterns": [{ "include": "#lf-rinfo" }],
+  "repository": {
+    "lf-rinfo": {
+      "patterns": [{ "include": "#control" }, { "include": "#operator" }, { "include": "#strings" }, { "include": "#number" }, { "include": "#comment" }, { "include": "#literal" }]
+    },
+    "control": {
+      "patterns": [
+        {
+          "name": "keyword.control.ri",
+          "match": "\\b(si|mientras|repetir)\\b"
+        },
+        {
+          "name": "keyword.other.ri",
+          "match": "\\b(programa|robots|areas|variables|comenzar|fin)\\b"
+        },
+        {
+          "name": "support.function.other.ri",
+          "match": "\\b(tomarFlor|HayFlorEnLaBolsa|HayFlorEnLaEsquina|depositarFlor|HayPapelEnLaBolsa|HayPapelEnLaEsquina|tomarPapel|depositarPapel)\\b"
+        }
+      ]
+    },
+    "operator": {
+      "comment": "Captures operators and also puts them in different sub-groups that further describe them",
+      "patterns": [
+        {
+          "match": "\\+|-|\\*|/",
+          "name": "keyword.operator.arithmetic.ri"
+        },
+        {
+          "match": "<|>|<=|>=|=|<>|!=",
+          "name": "keyword.operator.comparison.ri"
+        },
+        {
+          "match": "\\b(Pos|Informar|Leer|Iniciar|AsignarArea|AreaC)\\b",
+          "name": "support.function.arithmetic.ri"
+        },
+        {
+          "match": ":=",
+          "name": "keyword.operator.assign.ri"
+        },
+        {
+          "match": "(&|~)",
+          "name": "support.function.logical.ri"
+        }
+      ]
+    },
+    "strings": {
+      "name": "string.quoted.double.ri",
+      "beginCaptures": { "0": { "name": "string.quoted.double.begin.ri" } },
+      "endCaptures": { "0": { "name": "string.quoted.double.end.ri" } },
+      "begin": "\"",
+      "end": "\"",
+      "patterns": [
+        {
+          "name": "constant.character.escape.ri",
+          "match": "\\\\."
+        }
+      ]
+    },
+    "comment": {
+      "patterns": [
+        {
+          "name": "comment.block.ri",
+          "begin": "{",
+          "end": "}",
+          "patterns": [{ "include": "#comment" }]
+        }
+      ]
+    },
+    "literal": {
+      "patterns": [
+        {
+          "name": "constant.language.ri",
+          "match": "\\b(verdadero|falso|boolean|numero)\\b"
+        }
+      ]
+    },
+    "number": {
+      "patterns": [
+        {
+          "comment": "Captures decimal numbers, with the negative sign being considered an operator",
+          "match": "(-)?(?:((?:\\b\\d+(?:\\.\\d*)?|\\.\\d+)(?:\\b|e-?\\d+\\b)%?)|(\\$[0-9]+\\b))",
+          "captures": {
+            "1": { "name": "keyword.operator.arithmetic.ri" },
+            "2": { "name": "constant.numeric.decimal.ri" },
+            "3": { "name": "constant.numeric.hex.ri" }
+          }
+        }
+      ]
+    }
+  },
+  "scopeName": "source.rinfo"
+}