# code-block-pro/1.27.7/build/shiki/samples/astro.sample

Code Block Pro – Beautiful Syntax Highlighting, version 1.27.7. 29 lines.

- Page: https://pluginprobe.com/plugins/code-block-pro/1.27.7/code/build/shiki/samples/astro.sample
- Raw: https://pluginprobe.com/plugins/code-block-pro/1.27.7/raw/build/shiki/samples/astro.sample
- Modified: 2023-09-03T01:04:34+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-block-pro/1.27.7/code/build/shiki/samples/astro.sample#L10-L20`.

```
---
// Your component script here!
import Banner from '../components/Banner.astro';
import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx';
const myFavoritePokemon = [/* ... */];
const { title } = Astro.props;
---
<!-- HTML comments supported! -->
{/* JS comment syntax is also valid! */}

<Banner />
<h1>Hello, world!</h1>

<!-- Use props and other variables from the component script: -->
<p>{title}</p>

<!-- Include other UI framework components with a `client:` directive to hydrate: -->
<ReactPokemonComponent client:visible />

<!-- Mix HTML with JavaScript expressions, similar to JSX: -->
<ul>
  {myFavoritePokemon.map((data) => <li>{data.name}</li>)}
</ul>

<!-- Use a template directive to build class names from multiple strings or even objects! -->
<p class:list={["add", "dynamic", {classNames: true}]} />

<!-- From https://docs.astro.build/en/core-concepts/astro-components/ -->

```