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:
```shellgit log --oneline```
Add Title#
```shell title="start.sh"#!/bin/bash
bun check &bun dev```
Renders:
#!/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 checkbun lintbun format # [\!code ++]# No need for vercel or other ci/cdbun run build # [\!code --]git push```
Renders:
#!/bin/bash
bun checkbun lintbun format # [!code ++]# No need for vercel or other ci/cdbun run build # [!code --]git push
Show Hightlight#
<!-- You need to delete `\` during the use -->
```tsconst add = (a: number, b: number) => a + bconst sub = (a: number, b: number) => a - bconsole.log(add(1, 2)) // [\!code highlight]```
Renders:
const add = (a: number, b: number) => a + bconst sub = (a: number, b: number) => a - bconsole.log(add(1, 2)) // [!code highlight]
Show Hightlight Multiple Lines#
You can also highlight multiple lines with a single comment:
<!-- You need to delete `\` during the use -->
```tsconsole.log('Highlighted') // [\!code highlight:2]console.log('Highlighted')console.log('Not highlighted')```
Renders:
console.log('Highlighted') // [!code highlight:2]console.log('Highlighted')console.log('Not highlighted')