Built-in Components Reference

Astro includes several built-in components for you to use in your projects. All built-in components are available in .astro files and may require an import statement.

You can reference the Props of these components using the ComponentProps type utility.

<Code />

Section titled <Code />

---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 /><!-- Optional: Output inline code. --><p>  <Code code={`const foo = 'bar';`} lang="js" inline />  will be rendered inline.</p><!-- Optional: defaultColor --><Code code={`const foo = 'bar';`} lang="js" defaultColor={false} />

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 and languages. Plus, you can add your custom themes, languages, transformers, and default colors by passing them to the theme, lang, transformers, and defaultColor attributes respectively.

Note

This component does not inherit the settings from your Shiki configuration. You will have to set them using the component props.

Transformers

Section titled Transformers

Added in: astro@4.11.0

Shiki transformers can optionally be applied to code by passing them in through the transformers property as an array. Since Astro v4.14.0, you can also provide a string for Shiki’s meta attribute to pass options to transformers.

Note that transformers only applies classes and you must provide your own CSS rules to target the elements of your code block.

src/pages/index.astro

---import { transformerNotationFocus, transformerMetaHighlight } from '@shikijs/transformers'import { Code } from 'astro:components'const code = `const foo = 'hello'const bar = ' world'console.log(foo + bar) // [!code focus]`---<Code  code={code}  lang="js"  transformers={[transformerMetaHighlight()]}  meta="{1,3}"/>
<style is:global>  pre.has-focused .line:not(.focused) {    filter: blur(1px);  }</style>

<Fragment />

Section titled <Fragment /> A component used with set:* directives to render HTML content without any additional wrapping elements:

src/components/SetHtml.astro

---const htmlString = '<p>Raw HTML content</p>';---<Fragment set:html={htmlString} />

See more about using fragments in Astro syntax.

<Prism />

Section titled <Prism /> To use the Prism highlighter component, first install the @astrojs/prism package:

• npm
• pnpm
• Yarn

Terminal window

npm install @astrojs/prism

Terminal window

pnpm add @astrojs/prism

Terminal window

yarn add @astrojs/prism

---import { Prism } from '@astrojs/prism';---<Prism lang="js" code={`const foo = 'bar';`} />

This component provides language-specific syntax highlighting for code blocks by applying Prism’s CSS classes. Note that you need to provide a Prism CSS stylesheet (or bring your own) for syntax highlighting to appear! See the Prism configuration section for more details.

See the list of languages supported by Prism where you can find a language’s corresponding alias. And, you can also display your Astro code blocks with lang="astro".

<Debug />

Section titled <Debug />

---import { Debug } from 'astro:components';const serverObject = {  a: 0,  b: "string",  c: {    nested: "object"  }}---<Debug {serverObject} />

This component provides a way to inspect values on the client-side, without any JavaScript.

Reference