feat: Added the ability to add custom themes/languages to Shiki (#2518)

* Replaced `shikiTheme` with `shikiConfig`

* Code.astro now accepts custom themes/langs

* Updated docs

* Updated tests

* Fixed language loading

* Added customization examples

* Updated documentation

* Added more tests

* Changelogs

* Changed some spaces to tabs

* Fixed typo in changesets

* Moved tests fixtures

* Rolled back changes to with-markdown-shiki

* Removed lang example in docs

* Optimized Code component

* Try to fix windows errors

* Try to see if this new tests work

2 files changed, 10 insertions, 3 deletions

diff --git a/docs/src/pages/en/guides/markdown-content.md b/docs/src/pages/en/guides/markdown-content.md
index c90c5c1f1..487856171 100644
--- a/docs/src/pages/en/guides/markdown-content.md
+++ b/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.
diff --git a/docs/src/pages/en/reference/builtin-components.md b/docs/src/pages/en/reference/builtin-components.md
index b2d8c4295..76102bbaf 100644
--- a/docs/src/pages/en/reference/builtin-components.md
+++ b/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.