CCM

Back

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 # [!code ++]
# No need for vercel or other ci/cd
bun run build # [!code --]
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)) // [!code highlight]

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') // [!code highlight:2]
console.log('Highlighted')
console.log('Not highlighted')

DOCS