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 />

---
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 and languages.

You can also use the <Prism /> component for syntax highlighting powered by the Prism 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 />

---
import { Markdown } from 'astro/components';
---
<Markdown>
  # Markdown syntax is now supported! **Yay!**
</Markdown>

See our Markdown Guide for more info.

<Prism />

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

This component provides language-specific syntax highlighting for code blocks. Since this never changes in the client it makes sense to use an Astro component (it’s equally reasonable to use a framework component for this kind of thing; Astro is server-only by default for all frameworks!).

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 />

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

This component provides a way to inspect values on the clientside, without any JavaScript.