From e282e8e4ac7077a43b48bd692cfa28bbe4a9bdd0 Mon Sep 17 00:00:00 2001 From: "Fred K. Schott" Date: Fri, 3 Sep 2021 11:06:25 -0700 Subject: [PATCH] Add new component, to succeed (#1208) * add code component * Update packages/astro/components/Debug.astro Co-authored-by: Caleb Jasik * Update packages/astro/components/Debug.astro Co-authored-by: Caleb Jasik * fix format in debug component * remove Debug changes * add wrap support * add props docs * update default theme Co-authored-by: Peter Singh Co-authored-by: Caleb Jasik --- .changeset/perfect-emus-hear.md | 5 ++ docs/src/pages/bg/getting-started.md | 2 +- docs/src/pages/de/getting-started.md | 2 +- docs/src/pages/es/getting-started.md | 2 +- docs/src/pages/fi/getting-started.md | 2 +- docs/src/pages/fr/getting-started.md | 2 +- docs/src/pages/getting-started.md | 2 +- docs/src/pages/nl/getting-started.md | 2 +- docs/src/pages/pt-br/getting-started.md | 2 +- .../src/pages/reference/builtin-components.md | 20 +++++ docs/src/pages/zh-CN/getting-started.md | 2 +- docs/src/pages/zh-TW/getting-started.md | 2 +- packages/astro/components/Code.astro | 50 ++++++++++++ packages/astro/components/index.js | 2 + packages/astro/package.json | 1 + .../astro/test/astro-component-code.test.js | 79 +++++++++++++++++++ .../astro-component-code/snowpack.config.json | 3 + .../src/pages/basic.astro | 9 +++ .../src/pages/css-theme.astro | 9 +++ .../src/pages/custom-theme.astro | 9 +++ .../src/pages/no-lang.astro | 9 +++ .../src/pages/wrap-false.astro | 9 +++ .../src/pages/wrap-null.astro | 9 +++ .../src/pages/wrap-true.astro | 9 +++ yarn.lock | 23 +++++- 25 files changed, 255 insertions(+), 11 deletions(-) create mode 100644 .changeset/perfect-emus-hear.md create mode 100644 packages/astro/components/Code.astro create mode 100644 packages/astro/test/astro-component-code.test.js create mode 100644 packages/astro/test/fixtures/astro-component-code/snowpack.config.json create mode 100644 packages/astro/test/fixtures/astro-component-code/src/pages/basic.astro create mode 100644 packages/astro/test/fixtures/astro-component-code/src/pages/css-theme.astro create mode 100644 packages/astro/test/fixtures/astro-component-code/src/pages/custom-theme.astro create mode 100644 packages/astro/test/fixtures/astro-component-code/src/pages/no-lang.astro create mode 100644 packages/astro/test/fixtures/astro-component-code/src/pages/wrap-false.astro create mode 100644 packages/astro/test/fixtures/astro-component-code/src/pages/wrap-null.astro create mode 100644 packages/astro/test/fixtures/astro-component-code/src/pages/wrap-true.astro diff --git a/.changeset/perfect-emus-hear.md b/.changeset/perfect-emus-hear.md new file mode 100644 index 000000000..49c3f59ac --- /dev/null +++ b/.changeset/perfect-emus-hear.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Add new `` component, powered by the more modern shiki syntax highlighter. diff --git a/docs/src/pages/bg/getting-started.md b/docs/src/pages/bg/getting-started.md index 8b4c16bfc..003dc3424 100644 --- a/docs/src/pages/bg/getting-started.md +++ b/docs/src/pages/bg/getting-started.md @@ -39,7 +39,7 @@ _Бележка: някои функционалности (например: Fa ### API Справка -Тази секция е полезна, когато искате да научите повече детайли относно даден Astro API. Например - [Конфигурационната справка](/reference/configuration-reference) изброява всички възможни конфигурационни опции. [Справката за вградени компоненти](/reference/builtin-components) изброява всички възможни базови (core) компоненти, като `` и ``. +Тази секция е полезна, когато искате да научите повече детайли относно даден Astro API. Например - [Конфигурационната справка](/reference/configuration-reference) изброява всички възможни конфигурационни опции. [Справката за вградени компоненти](/reference/builtin-components) изброява всички възможни базови (core) компоненти, като `` и ``. ### Версия на документацията diff --git a/docs/src/pages/de/getting-started.md b/docs/src/pages/de/getting-started.md index 1ebd1846c..928982cf9 100644 --- a/docs/src/pages/de/getting-started.md +++ b/docs/src/pages/de/getting-started.md @@ -44,7 +44,7 @@ Unsere Anleitung zu [Astro-Komponenten](/core-concepts/astro-components) sollte Dieser Dokumentationsabschnitt sollte für Dich nützlich sein, wenn Du mehr Details über eine bestimme Astro-API erfahren möchtest. -So listet z.B. die [Konfigurationsdokumentation](/reference/configuration-reference) alle möglichen Konfigurationseigenschaften auf, die Dir zur Verfügung stehen. In der [Dokumentation über eingebaute Komponenten](/reference/builtin-components) findest Du alle verfügbaren Kernkomponenten wie `` und ``. +So listet z.B. die [Konfigurationsdokumentation](/reference/configuration-reference) alle möglichen Konfigurationseigenschaften auf, die Dir zur Verfügung stehen. In der [Dokumentation über eingebaute Komponenten](/reference/builtin-components) findest Du alle verfügbaren Kernkomponenten wie `` und ``. ### Versionierte Dokumentation diff --git a/docs/src/pages/es/getting-started.md b/docs/src/pages/es/getting-started.md index 31b53f9bc..5de120149 100644 --- a/docs/src/pages/es/getting-started.md +++ b/docs/src/pages/es/getting-started.md @@ -39,7 +39,7 @@ Nuestra guía sobre [componentes Astro](https://docs.astro.build/core-concepts/a ### Referencia de la API -Esta sección de documentación es útil cuando deseas obtener más detalles sobre una API de Astro en particular. Por ejemplo, la [referencia de configuración](https://docs.astro.build/reference/configuration-reference) enumera todas las opciones de configuración disponibles. La [referencia de componentes incluidos](https://docs.astro.build/reference/builtin-components) enumera todos los componentes básicos disponibles, como `` y ``. +Esta sección de documentación es útil cuando deseas obtener más detalles sobre una API de Astro en particular. Por ejemplo, la [referencia de configuración](https://docs.astro.build/reference/configuration-reference) enumera todas las opciones de configuración disponibles. La [referencia de componentes incluidos](https://docs.astro.build/reference/builtin-components) enumera todos los componentes básicos disponibles, como `` y ``. ### Documentación versionada diff --git a/docs/src/pages/fi/getting-started.md b/docs/src/pages/fi/getting-started.md index f7694e436..df6f76432 100644 --- a/docs/src/pages/fi/getting-started.md +++ b/docs/src/pages/fi/getting-started.md @@ -37,7 +37,7 @@ Oppaamme [Astron komponenteista](/core-concepts/astro-components) esittelee uude ### API-luettelo -Tämä dokumentaation osa on hyödyllisin halutessasi oppia yksityiskohtia tietystä Astron rajapinnasta. Muun muassa [asetusluettelo](/reference/configuration-reference) listaa kaikki mahdolliset asetusvaihtoehdot. [Ydinkomponenttien luettelo](/reference/builtin-components) listaa kaikki käytössä olevat Astron mukana tulevat komponentit kuten `` ja ``. +Tämä dokumentaation osa on hyödyllisin halutessasi oppia yksityiskohtia tietystä Astron rajapinnasta. Muun muassa [asetusluettelo](/reference/configuration-reference) listaa kaikki mahdolliset asetusvaihtoehdot. [Ydinkomponenttien luettelo](/reference/builtin-components) listaa kaikki käytössä olevat Astron mukana tulevat komponentit kuten `` ja ``. ### Dokumentaation versioinnista diff --git a/docs/src/pages/fr/getting-started.md b/docs/src/pages/fr/getting-started.md index 94773be10..1bb713b34 100644 --- a/docs/src/pages/fr/getting-started.md +++ b/docs/src/pages/fr/getting-started.md @@ -39,7 +39,7 @@ Notre guide sur les [composants Astro](/core-concepts/astro-components) vous pr ### Documentation de l'API -Cette documentation vous sera utile si vous souhaitez comprendre en détails certaines API d'Astro. Par exemple, la [Documentation de la Configuration](/reference/configuration-reference) liste toutes les options de configuration à votre disposition. La [Documentation des Composants de base](/reference/builtin-components) liste tous les composants disponibles de base, comme `` et ``. +Cette documentation vous sera utile si vous souhaitez comprendre en détails certaines API d'Astro. Par exemple, la [Documentation de la Configuration](/reference/configuration-reference) liste toutes les options de configuration à votre disposition. La [Documentation des Composants de base](/reference/builtin-components) liste tous les composants disponibles de base, comme `` et ``. ### Documentation versionnée diff --git a/docs/src/pages/getting-started.md b/docs/src/pages/getting-started.md index b1d1563f5..73ac8e0d7 100644 --- a/docs/src/pages/getting-started.md +++ b/docs/src/pages/getting-started.md @@ -38,7 +38,7 @@ Our helpful guide on [Astro components](/core-concepts/astro-components) introdu ### API Reference -This documentation section is useful when you want to learn more details about a particular Astro API. For example, [Configuration Reference](/reference/configuration-reference) lists all possible configuration options available to you. [Built-in Components Reference](/reference/builtin-components) lists all available core components, like `` and ``. +This documentation section is useful when you want to learn more details about a particular Astro API. For example, [Configuration Reference](/reference/configuration-reference) lists all possible configuration options available to you. [Built-in Components Reference](/reference/builtin-components) lists all available core components, like `` and ``. ### Versioned Documentation diff --git a/docs/src/pages/nl/getting-started.md b/docs/src/pages/nl/getting-started.md index 66fa7e8c5..e02742710 100644 --- a/docs/src/pages/nl/getting-started.md +++ b/docs/src/pages/nl/getting-started.md @@ -37,7 +37,7 @@ Onze gids over [Astro-componenten](/core-concepts/astro-components) helpt je doo ### API referentie -Deze documentatiesectie is handig als je meer details wilt weten over een bepaalde Astro API. [Configuratie referentie](/reference/configuration-reference) vermeldt bijvoorbeeld alle mogelijke configuratieopties die beschikbaar zijn. [Ingebouwde Componenten Referentie](/reference/builtin-components) geeft een overzicht van alle beschikbare kerncomponenten, zoals en . +Deze documentatiesectie is handig als je meer details wilt weten over een bepaalde Astro API. [Configuratie referentie](/reference/configuration-reference) vermeldt bijvoorbeeld alle mogelijke configuratieopties die beschikbaar zijn. [Ingebouwde Componenten Referentie](/reference/builtin-components) geeft een overzicht van alle beschikbare kerncomponenten, zoals en . ### Documentatie versies diff --git a/docs/src/pages/pt-br/getting-started.md b/docs/src/pages/pt-br/getting-started.md index 36bb910dd..d4b2cc661 100644 --- a/docs/src/pages/pt-br/getting-started.md +++ b/docs/src/pages/pt-br/getting-started.md @@ -39,7 +39,7 @@ Nosso guia útil em [componentes Astro](/core-concepts/astro-components) apresen ### Referência da API -Esta seção de documentação é útil quando você deseja aprender mais detalhes sobre uma determinada API do Astro. Por exemplo, [Referência de Configuração](/reference/configuration-reference) lista todas as opções de configuração possíveis disponíveis para você. [Referência de componentes incorporados](/reference/builtin-components) listas todos os componentes base disponíveis, como `` e ``.s +Esta seção de documentação é útil quando você deseja aprender mais detalhes sobre uma determinada API do Astro. Por exemplo, [Referência de Configuração](/reference/configuration-reference) lista todas as opções de configuração possíveis disponíveis para você. [Referência de componentes incorporados](/reference/builtin-components) listas todos os componentes base disponíveis, como `` e ``.s ### Documentação por Versão diff --git a/docs/src/pages/reference/builtin-components.md b/docs/src/pages/reference/builtin-components.md index 3db33e0db..7ff0e5ba6 100644 --- a/docs/src/pages/reference/builtin-components.md +++ b/docs/src/pages/reference/builtin-components.md @@ -5,6 +5,26 @@ title: Built-In Components Astro includes several builtin components for you to use in your projects. All builtin components are available via `import {} from 'astro/components';`. + +## `` + +```astro +--- +import { Code } from 'astro/components'; +--- + + + + + + +``` + +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). + +You can also use the `` 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 `` as we move towards our v1.0 release. + + ## `` ```astro diff --git a/docs/src/pages/zh-CN/getting-started.md b/docs/src/pages/zh-CN/getting-started.md index c602f928b..e50be90d4 100644 --- a/docs/src/pages/zh-CN/getting-started.md +++ b/docs/src/pages/zh-CN/getting-started.md @@ -40,7 +40,7 @@ Astro 是一个现代的静态网站生成工具. 你可以从 [我们的主页] ### API 参考文档 -当你想了解某个特定的 Astro API 的更多细节时，这部分文档是有用的。例如 [配置参考](/reference/configuration-reference) 列出所有可能的配置选项供你使用。 [内置组件参考](/reference/builtin-components) 列出了所有可用的核心组件，如``和``。 +当你想了解某个特定的 Astro API 的更多细节时，这部分文档是有用的。例如 [配置参考](/reference/configuration-reference) 列出所有可能的配置选项供你使用。 [内置组件参考](/reference/builtin-components) 列出了所有可用的核心组件，如``和``。 ### 其他版本文档 diff --git a/docs/src/pages/zh-TW/getting-started.md b/docs/src/pages/zh-TW/getting-started.md index 10bfc9270..ef1d2dc91 100644 --- a/docs/src/pages/zh-TW/getting-started.md +++ b/docs/src/pages/zh-TW/getting-started.md @@ -39,7 +39,7 @@ Astro 是利用現代技術的靜態網站生成工具。可以從[首頁](https ### API 參考手冊 -如果想要深入探討某個 Astro API，這部分的文件會很有幫助。例如：[設定參考](/reference/configuration-reference)列出所有可以使用的設定選項。[內建元件參考](/reference/builtin-components)列出所有可以使用的核心元件，像是 `` 和 ``。 +如果想要深入探討某個 Astro API，這部分的文件會很有幫助。例如：[設定參考](/reference/configuration-reference)列出所有可以使用的設定選項。[內建元件參考](/reference/builtin-components)列出所有可以使用的核心元件，像是 `` 和 ``。 ### 先前版本的文件 diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro new file mode 100644 index 000000000..e2e22061a --- /dev/null +++ b/packages/astro/components/Code.astro @@ -0,0 +1,50 @@ +--- +import shiki from 'shiki'; + +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 + */ + lang?: string; + /** + * The styling theme. Defaults to "github-dark". + * Supports all themes listed here: https://github.com/shikijs/shiki/blob/main/docs/themes.md + * Instructions for loading a custom theme: https://github.com/shikijs/shiki/blob/main/docs/themes.md#loading-theme + */ + theme?: string; + /** + * Enable word wrapping. Defaults to "false". + * - true: enabled. + * - false: enabled. + * - null: All overflow styling removed. Code will overflow the element by default. + */ + wrap?: boolean | null; +} + +const { code, lang = 'plaintext', theme = 'github-dark', wrap = false } = Astro.props; + +/** Replace the shiki class name with a custom astro class name. */ +function repairShikiTheme(html: string): string { + // Replace "shiki" class naming with "astro". + html = html.replace('
');
+
+setup(Components, './fixtures/astro-component-code');
+
+Components(' without lang or theme', async ({ runtime }) => {
+  let result = await runtime.load('/no-lang');
+  assert.ok(!result.error, `build error: ${result.error}`);
+  const $ = doc(result.contents);
+  assert.equal($('pre').length, 1);
+  assert.equal($('pre').attr('style'), 'background-color: #0d1117; overflow-x: auto;', 'applies default and overflow');
+  assert.equal($('pre > code').length, 1);
+  assert.ok($('pre > code span').length > 1, 'contains some generated spans');
+});
+
+Components('', async ({ runtime }) => {
+  let result = await runtime.load('/basic');
+  assert.ok(!result.error, `build error: ${result.error}`);
+  const $ = doc(result.contents);
+  assert.equal($('pre').length, 1);
+  assert.equal($('pre').attr('class'), 'astro-code');
+  assert.equal($('pre > code').length, 1);
+  assert.ok($('pre > code span').length >= 6, 'contains many generated spans');
+});
+
+Components('', async ({ runtime }) => {
+  let result = await runtime.load('/custom-theme');
+  assert.ok(!result.error, `build error: ${result.error}`);
+  const $ = doc(result.contents);
+  assert.equal($('pre').length, 1);
+  assert.equal($('pre').attr('class'), 'astro-code');
+  assert.equal($('pre').attr('style'), 'background-color: #2e3440ff; overflow-x: auto;', 'applies custom theme');
+});
+
+Components('', async ({ runtime }) => { 
+  {
+    let result = await runtime.load('/wrap-true');
+    assert.ok(!result.error, `build error: ${result.error}`);
+    const $ = doc(result.contents);
+    assert.equal($('pre').length, 1);
+    assert.equal($('pre').attr('style'), 'background-color: #0d1117; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;', 'applies wrap overflow');
+  }
+  {
+    let result = await runtime.load('/wrap-false');
+    assert.ok(!result.error, `build error: ${result.error}`);
+    const $ = doc(result.contents);
+    assert.equal($('pre').length, 1);
+    assert.equal($('pre').attr('style'), 'background-color: #0d1117; overflow-x: auto;', 'applies wrap overflow');
+  }
+  {
+    let result = await runtime.load('/wrap-null');
+    assert.ok(!result.error, `build error: ${result.error}`);
+    const $ = doc(result.contents);
+    assert.equal($('pre').length, 1);
+    assert.equal($('pre').attr('style'), 'background-color: #0d1117', 'applies wrap overflow');
+  }
+});
+
+Components('', async ({ runtime }) => {
+  let result = await runtime.load('/css-theme');
+  assert.ok(!result.error, `build error: ${result.error}`);
+  const $ = doc(result.contents);
+  assert.equal($('pre').length, 1);
+  assert.equal($('pre').attr('class'), 'astro-code');
+  assert.equal($('pre, pre span').map((i, f) => f.attribs ? f.attribs.style : 'no style found').toArray(), [
+    "background-color: var(--astro-code-color-background); overflow-x: auto;",
+    "color: var(--astro-code-token-constant)",
+    "color: var(--astro-code-token-function)",
+    "color: var(--astro-code-color-text)",
+    "color: var(--astro-code-token-string-expression)",
+    "color: var(--astro-code-color-text)",
+  ]);
+});
+
+Components.run();
diff --git a/packages/astro/test/fixtures/astro-component-code/snowpack.config.json b/packages/astro/test/fixtures/astro-component-code/snowpack.config.json
new file mode 100644
index 000000000..8f034781d
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-component-code/snowpack.config.json
@@ -0,0 +1,3 @@
+{
+  "workspaceRoot": "../../../../../"
+}
diff --git a/packages/astro/test/fixtures/astro-component-code/src/pages/basic.astro b/packages/astro/test/fixtures/astro-component-code/src/pages/basic.astro
new file mode 100644
index 000000000..9fba8620a
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-component-code/src/pages/basic.astro
@@ -0,0 +1,9 @@
+---
+import {Code} from 'astro/components';
+---
+
+Code component
+
+  
+
+
diff --git a/packages/astro/test/fixtures/astro-component-code/src/pages/css-theme.astro b/packages/astro/test/fixtures/astro-component-code/src/pages/css-theme.astro
new file mode 100644
index 000000000..8a4a8debf
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-component-code/src/pages/css-theme.astro
@@ -0,0 +1,9 @@
+---
+import {Code} from 'astro/components';
+---
+
+Code component
+
+  
+
+
diff --git a/packages/astro/test/fixtures/astro-component-code/src/pages/custom-theme.astro b/packages/astro/test/fixtures/astro-component-code/src/pages/custom-theme.astro
new file mode 100644
index 000000000..80cafe5cc
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-component-code/src/pages/custom-theme.astro
@@ -0,0 +1,9 @@
+---
+import {Code} from 'astro/components';
+---
+
+Code component
+
+  
+
+
diff --git a/packages/astro/test/fixtures/astro-component-code/src/pages/no-lang.astro b/packages/astro/test/fixtures/astro-component-code/src/pages/no-lang.astro
new file mode 100644
index 000000000..ebc1b0810
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-component-code/src/pages/no-lang.astro
@@ -0,0 +1,9 @@
+---
+import {Code} from 'astro/components';
+---
+
+Code component
+
+  
+
+
diff --git a/packages/astro/test/fixtures/astro-component-code/src/pages/wrap-false.astro b/packages/astro/test/fixtures/astro-component-code/src/pages/wrap-false.astro
new file mode 100644
index 000000000..ca1e238c7
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-component-code/src/pages/wrap-false.astro
@@ -0,0 +1,9 @@
+---
+import {Code} from 'astro/components';
+---
+
+Code component
+
+  
+
+
diff --git a/packages/astro/test/fixtures/astro-component-code/src/pages/wrap-null.astro b/packages/astro/test/fixtures/astro-component-code/src/pages/wrap-null.astro
new file mode 100644
index 000000000..cff0190e8
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-component-code/src/pages/wrap-null.astro
@@ -0,0 +1,9 @@
+---
+import {Code} from 'astro/components';
+---
+
+Code component
+
+  
+
+
diff --git a/packages/astro/test/fixtures/astro-component-code/src/pages/wrap-true.astro b/packages/astro/test/fixtures/astro-component-code/src/pages/wrap-true.astro
new file mode 100644
index 000000000..82e8f65c2
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-component-code/src/pages/wrap-true.astro
@@ -0,0 +1,9 @@
+---
+import {Code} from 'astro/components';
+---
+
+Code component
+
+  
+
+
diff --git a/yarn.lock b/yarn.lock
index 591f97bf7..6ca0f0bdc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6158,7 +6158,7 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2:
+json5@^2.1.2, json5@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
   integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
@@ -7866,6 +7866,13 @@ onetime@^5.1.0, onetime@^5.1.2:
   dependencies:
     mimic-fn "^2.1.0"
 
+onigasm@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/onigasm/-/onigasm-2.2.5.tgz#cc4d2a79a0fa0b64caec1f4c7ea367585a676892"
+  integrity sha512-F+th54mPc0l1lp1ZcFMyL/jTs2Tlq4SqIHKIXGZOR/VkHkF9A7Fr5rRr5+ZG/lWeRsyrClLYRq7s/yFQ/XhWCA==
+  dependencies:
+    lru-cache "^5.1.1"
+
 only@~0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/only/-/only-0.0.2.tgz#2afde84d03e50b9a8edc444e30610a70295edfb4"
@@ -9497,6 +9504,15 @@ shell-quote@^1.6.1:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
   integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
 
+shiki@^0.9.10:
+  version "0.9.10"
+  resolved "https://registry.yarnpkg.com/shiki/-/shiki-0.9.10.tgz#feb8d4938b5dd71c5c8b1c1c7cd28fbbd37da087"
+  integrity sha512-xeM7Oc6hY+6iW5O/T5hor8ul7mEprzyl5y4r5zthEHToQNw7MIhREMgU3r2gKDB0NaMLNrkcEQagudCdzE13Lg==
+  dependencies:
+    json5 "^2.2.0"
+    onigasm "^2.2.5"
+    vscode-textmate "5.2.0"
+
 shorthash@^0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/shorthash/-/shorthash-0.0.2.tgz#59b268eecbde59038b30da202bcfbddeb2c4a4eb"
@@ -10900,6 +10916,11 @@ vm2@^3.9.2:
   resolved "https://registry.yarnpkg.com/vm2/-/vm2-3.9.3.tgz#29917f6cc081cc43a3f580c26c5b553fd3c91f40"
   integrity sha512-smLS+18RjXYMl9joyJxMNI9l4w7biW8ilSDaVRvFBDwOH8P0BK1ognFQTpg0wyQ6wIKLTblHJvROW692L/E53Q==
 
+vscode-textmate@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/vscode-textmate/-/vscode-textmate-5.2.0.tgz#01f01760a391e8222fe4f33fbccbd1ad71aed74e"
+  integrity sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ==
+
 vue@^3.2.0:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.6.tgz#c71445078751f458648fd8fb3a2da975507d03d2"