diff options
| author |  Fred K. Schott <fkschott@gmail.com>
| 2021-09-03 11:06:25 -0700 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-09-03 11:06:25 -0700 |
| commit | e282e8e4ac7077a43b48bd692cfa28bbe4a9bdd0 (patch) | |
| tree | df18ae4a08575666e3616427438ecfb3e500dc61 /docs/src/pages/reference | |
| parent | 373e44d0a59339fd6b15280afd4b35b05fc94deb (diff) | |
| download | astro-e282e8e4ac7077a43b48bd692cfa28bbe4a9bdd0.tar.gz astro-e282e8e4ac7077a43b48bd692cfa28bbe4a9bdd0.tar.zst astro-e282e8e4ac7077a43b48bd692cfa28bbe4a9bdd0.zip | |
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>
Diffstat (limited to 'docs/src/pages/reference')
| -rw-r--r-- | docs/src/pages/reference/builtin-components.md | 20 |
1 files changed, 20 insertions, 0 deletions
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';`. + +## `<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 |