Shiki Code • Astro Theme Pure

Docs content

Basic Usage#

For .astro file:

---
import { Code } from 'astro:components'
---

<Code lang='shell' code={`git log --oneline`} />

astro

For .mdx and .md file:

```shell
git log --oneline
```

markdown

Add Title#

```shell title="start.sh"
#!/bin/bash

bun check &
bun dev
```

markdown

Renders:

start.sh

#!/bin/bash

bun check &
bun dev

shell

Show Diff#

Supports add and del lines.

<!-- You need to delete `\` during the use -->

```shell title="deploy.sh"
#!/bin/bash

bun check
bun lint
bun format # [\!code ++]
# No need for vercel or other ci/cd
bun run build # [\!code --]
git push
```

markdown

Renders:

deploy.sh

#!/bin/bash

bun check
bun lint
bun format
# No need for vercel or other ci/cd
bun run build
git push

shell

Show Hightlight#

<!-- You need to delete `\` during the use -->

```ts
const add = (a: number, b: number) => a + b
const sub = (a: number, b: number) => a - b
console.log(add(1, 2)) // [\!code highlight]
```

markdown

Renders:

const add = (a: number, b: number) => a + b
const sub = (a: number, b: number) => a - b
console.log(add(1, 2))

Show Hightlight Multiple Lines#

You can also highlight multiple lines with a single comment:

<!-- You need to delete `\` during the use -->

```ts
console.log('Highlighted') // [\!code highlight:2]
console.log('Highlighted')
console.log('Not highlighted')
```

markdown

Renders:

console.log('Highlighted') 
console.log('Highlighted')
console.log('Not highlighted')

See more docs