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

@@ -17,9 +17,11 @@ import { Code } from 'astro/components';
 <Code code={`const foo = 'bar';`} lang="js" theme="dark-plus" />
 <!-- Optional: Enable word wrapping. -->
 <Code code={`const foo = 'bar';`} lang="js" wrap />
+<!-- Load custom language -->
+<Code code={`const foo = 'bar';`} lang={{id: "myLang", /* ... */}} />
 ```
 
-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

@@ -6,6 +6,9 @@
 // helpful tooltips, and warnings if your exported object is invalid.
 // You can disable this by removing "@ts-check" and `@type` comments below.
 import astroRemark from '@astrojs/markdown-remark';
+import fs from 'fs';
+
+const riGrammar = JSON.parse(fs.readFileSync('./src/shiki/ri.tmLanguage.json'));
 
 // @ts-check
 export default /** @type {import('astro').AstroUserConfig} */ ({
@@ -15,7 +18,17 @@ export default /** @type {import('astro').AstroUserConfig} */ ({
 			astroRemark,
 			{
 				syntaxHighlight: 'shiki',
-				shikiTheme: 'dracula',
+				shikiConfig: {
+					theme: 'dracula',
+					langs: [
+						{
+							id: 'rinfo',
+							scopeName: 'source.rinfo',
+							grammar: riGrammar,
+							aliases: ['ri'],
+						},
+					],
+				},
 			},
 		],
 	},

examples/with-markdown-shiki/src/pages/custom.astro

@@ -0,0 +1,41 @@
+---
+import Layout from '../layouts/main.astro'
+import {Code} from 'astro/components'
+
+import riGrammar from '../shiki/ri.tmLanguage.json'
+import serendipity from '../shiki/serendipity-morning.json'
+
+const rinfo = {
+	id: 'rinfo',
+	scopeName: 'source.rinfo',
+	grammar: riGrammar,
+	aliases: ['ri'],
+}
+
+const rinfoCode = `
+programa Rinfo
+areas
+	ciuadad: AreaC(1,1,100,100)
+robots
+	robot robot1
+	comenzar
+		Informar(PosAv, PosCa)
+	fin
+variables
+	Rinfo: robot1
+comenzar
+	AsignarArea(Rinfo, ciudad)
+	Iniciar(Rinfo, 1, 1)
+fin
+`.trim()
+---
+
+<Layout content={{}}>
+	<h1>Customizations</h1>
+
+	<Code code="console.log('Hello from GitHub Dark')" lang="js" />
+	<Code code="console.log('Hello from GitHub Light')" lang="js" theme="github-light" />
+	<Code code="console.log('Hello from Serendipity')" lang="js" theme={serendipity} />
+	<Code code={rinfoCode} lang={rinfo} theme="github-light" />
+	<Code code={rinfoCode} lang={rinfo} theme={serendipity} />
+</Layout>

examples/with-markdown-shiki/src/pages/index.md

@@ -5,10 +5,33 @@ layout: ../layouts/main.astro
 
 # Shiki demo
 
+JavaScript
+
 ```js
 var foo = 'bar';
 
 function doSomething() {
   return foo;
 }
 ```
+
+Custom language (rinfo)
+
+```rinfo
+programa Rinfo
+areas
+  ciuadad: AreaC(1,1,100,100)
+robots
+  robot robot1
+  comenzar
+    Informar(PosAv, PosCa)
+  fin
+variables
+  Rinfo: robot1
+comenzar
+  AsignarArea(Rinfo, ciudad)
+  Iniciar(Rinfo, 1, 1)
+fin
+```
+
+[More customizations](/custom)

examples/with-markdown-shiki/src/shiki/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"
+}