EteroConLab Neue

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`} />
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))
ts

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')
ts

DOCS