Shiki Code
Some mmthods using shiki code
Basic Usage#
For .astro file:
---
import { Code } from 'astro:components'
---
<Code lang='shell' code={`git log --oneline`} />
For .mdx and .md file:
```shell
git log --oneline
```
Add Title#
```shell title="start.sh"
#!/bin/bash
bun check &
bun dev
```
Renders:
start.sh
#!/bin/bash
bun check &
bun dev
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
```
Renders:
deploy.sh
#!/bin/bash
bun check
bun lint
bun format
# No need for vercel or other ci/cd
bun run build
git push
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]
```
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')
```
Renders:
console.log('Highlighted')
console.log('Highlighted')
console.log('Not highlighted')
See more docs