Add new <Code> component, to succeed <Prism> (#1208)

* add code component

* Update packages/astro/components/Debug.astro

Co-authored-by: Caleb Jasik <calebjasik@jasik.xyz>

* Update packages/astro/components/Debug.astro

Co-authored-by: Caleb Jasik <calebjasik@jasik.xyz>

* fix format in debug component

* remove Debug changes

* add wrap support

* add props docs

* update default theme

Co-authored-by: Peter Singh <drgaud@hotmail.com>
Co-authored-by: Caleb Jasik <calebjasik@jasik.xyz>

.changeset/perfect-emus-hear.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Add new `<Code>` component, powered by the more modern shiki syntax highlighter.

docs/src/pages/bg/getting-started.md

@@ -39,7 +39,7 @@ _Бележка: някои функционалности (например: Fa
 
 ### API Справка
 
-Тази секция е полезна, когато искате да научите повече детайли относно даден Astro API. Например - [Конфигурационната справка](/reference/configuration-reference) изброява всички възможни конфигурационни опции. [Справката за вградени компоненти](/reference/builtin-components) изброява всички възможни базови (core) компоненти, като `<Markdown />` и `<Prism />`.
+Тази секция е полезна, когато искате да научите повече детайли относно даден Astro API. Например - [Конфигурационната справка](/reference/configuration-reference) изброява всички възможни конфигурационни опции. [Справката за вградени компоненти](/reference/builtin-components) изброява всички възможни базови (core) компоненти, като `<Markdown />` и `<Code />`.
 
 ### Версия на документацията
 

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 `<Markdown />` und `<Prism />`.
+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 `<Markdown />` und `<Code />`.
 
 ### Versionierte Dokumentation
 

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 `<Markdown/>` y `<Prism/>`.
+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 `<Markdown />` y `<Code />`.
 
 ### Documentación versionada
 

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 `<Markdown />` ja `<Prism />`.
+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 `<Markdown />` ja `<Code />`.
 
 ### Dokumentaation versioinnista
 

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 `<Markdown />` et `<Prism />`.
+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 `<Markdown />` et `<Code />`.
 
 ### Documentation versionnée
 

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 `<Markdown />` and `<Prism />`.
+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 `<Markdown />` and `<Code />`.
 
 ### Versioned Documentation
 

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 <Markdown /> en <Prism />.
+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 <Markdown /> en <Code />.
 
 ### Documentatie versies
 

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 `<Markdown />` e `<Prism />`.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 `<Markdown />` e `<Code />`.s
 
 ### Documentação por Versão
 

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';`.
 
+
+## `<Code />`
+
+```astro
+---
+import { Code } from 'astro/components';
+---
+<!-- Syntax highlight some JavaScript code. -->
+<Code code={`const foo = 'bar';`} lang="js" />
+<!-- Optional: customize your theme. -->
+<Code code={`const foo = 'bar';`} lang="js" theme="dark-plus" />
+<!-- Optional: Enable word wrapping. -->
+<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).
+
+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.
+
+
 ## `<Markdown />`
 
 ```astro

docs/src/pages/zh-CN/getting-started.md

@@ -40,7 +40,7 @@ Astro 是一个现代的静态网站生成工具. 你可以从 [我们的主页]
 
 ### API 参考文档
 
-当你想了解某个特定的 Astro API 的更多细节时，这部分文档是有用的。例如 [配置参考](/reference/configuration-reference) 列出所有可能的配置选项供你使用。 [内置组件参考](/reference/builtin-components) 列出了所有可用的核心组件，如`<Markdown />`和`<Prism />`。
+当你想了解某个特定的 Astro API 的更多细节时，这部分文档是有用的。例如 [配置参考](/reference/configuration-reference) 列出所有可能的配置选项供你使用。 [内置组件参考](/reference/builtin-components) 列出了所有可用的核心组件，如`<Markdown />`和`<Code />`。
 
 ### 其他版本文档
 

docs/src/pages/zh-TW/getting-started.md

@@ -39,7 +39,7 @@ Astro 是利用現代技術的靜態網站生成工具。可以從[首頁](https
 
 ### API 參考手冊
 
-如果想要深入探討某個 Astro API，這部分的文件會很有幫助。例如：[設定參考](/reference/configuration-reference)列出所有可以使用的設定選項。[內建元件參考](/reference/builtin-components)列出所有可以使用的核心元件，像是 `<Markdown />` 和 `<Prism />`。
+如果想要深入探討某個 Astro API，這部分的文件會很有幫助。例如：[設定參考](/reference/configuration-reference)列出所有可以使用的設定選項。[內建元件參考](/reference/builtin-components)列出所有可以使用的核心元件，像是 `<Markdown />` 和 `<Code />`。
 
 ### 先前版本的文件
 

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('<pre class="shiki"', '<pre class="astro-code"');
+  // Replace "shiki" css variable naming with "astro".
+  html = html.replace(/style="(background-)?color: var\(--shiki-/g, 'style="$1color: var(--astro-code-');
+  // Handle code wrapping
+  // if wrap=null, do nothing.
+  if (wrap === false) {
+    html = html.replace(/style="(.*?)"/, 'style="$1; overflow-x: auto;"');
+  } else if (wrap === true) {
+    html = html.replace(/style="(.*?)"/, 'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"');
+  }
+  return html;
+}
+
+
+const highlighter = await shiki.getHighlighter({theme});
+const _html = highlighter.codeToHtml(code, lang);
+html = repairShikiTheme(_html);
+---
+{html}

packages/astro/components/index.js

@@ -1,2 +1,4 @@
+export { default as Code } from './Code.astro';
+export { default as Debug } from './Debug.astro';
 export { default as Markdown } from './Markdown.astro';
 export { default as Prism } from './Prism.astro';

packages/astro/package.json

@@ -92,6 +92,7 @@
     "sass": "^1.32.13",
     "semver": "^7.3.5",
     "send": "^0.17.1",
+    "shiki": "^0.9.10",
     "shorthash": "^0.0.2",
     "slash": "^4.0.0",
     "snowpack": "^3.8.6",

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

@@ -0,0 +1,79 @@
+import { suite } from 'uvu';
+import * as assert from 'uvu/assert';
+import { doc } from './test-utils.js';
+import { setup } from './helpers.js';
+
+const Components = suite('<Code>');
+
+setup(Components, './fixtures/astro-component-code');
+
+Components('<Code> 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('<Code lang="...">', 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('<Code theme="...">', 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('<Code wrap>', 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('<Code lang="..." theme="css-variables">', 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();

packages/astro/test/fixtures/astro-component-code/snowpack.config.json

@@ -0,0 +1,3 @@
+{
+  "workspaceRoot": "../../../../../"
+}

packages/astro/test/fixtures/astro-component-code/src/pages/basic.astro

@@ -0,0 +1,9 @@
+---
+import {Code} from 'astro/components';
+---
+<html>
+<head><title>Code component</title></head>
+<body>
+  <Code code="console.log('hello world');" lang="js" />
+</body>
+</html>

packages/astro/test/fixtures/astro-component-code/src/pages/css-theme.astro

@@ -0,0 +1,9 @@
+---
+import {Code} from 'astro/components';
+---
+<html>
+<head><title>Code component</title></head>
+<body>
+  <Code code="console.log('color: #000001');" lang="js" theme="css-variables" />
+</body>
+</html>

packages/astro/test/fixtures/astro-component-code/src/pages/custom-theme.astro

@@ -0,0 +1,9 @@
+---
+import {Code} from 'astro/components';
+---
+<html>
+<head><title>Code component</title></head>
+<body>
+  <Code code="console.log('hello world');" lang="js" theme="nord" />
+</body>
+</html>

packages/astro/test/fixtures/astro-component-code/src/pages/no-lang.astro

@@ -0,0 +1,9 @@
+---
+import {Code} from 'astro/components';
+---
+<html>
+<head><title>Code component</title></head>
+<body>
+  <Code code="console.log('hello world');" />
+</body>
+</html>

packages/astro/test/fixtures/astro-component-code/src/pages/wrap-false.astro

@@ -0,0 +1,9 @@
+---
+import {Code} from 'astro/components';
+---
+<html>
+<head><title>Code component</title></head>
+<body>
+  <Code code="console.log('hello world');" lang="js" wrap={false} />
+</body>
+</html>

packages/astro/test/fixtures/astro-component-code/src/pages/wrap-null.astro

@@ -0,0 +1,9 @@
+---
+import {Code} from 'astro/components';
+---
+<html>
+<head><title>Code component</title></head>
+<body>
+  <Code code="console.log('hello world');" lang="js" wrap={null} />
+</body>
+</html>

packages/astro/test/fixtures/astro-component-code/src/pages/wrap-true.astro

@@ -0,0 +1,9 @@
+---
+import {Code} from 'astro/components';
+---
+<html>
+<head><title>Code component</title></head>
+<body>
+  <Code code="console.log('hello world');" lang="js" wrap />
+</body>
+</html>

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"