codeblocks

by default we support code highlight with beautiful syntax tricks thanks to shiki.js and shiki transformers

```js
console.log("hello world")
```

console.log("hello world")

```ts
console.log('hewwo') //⠀[!code --]
console.log('hello') //⠀[!code ++]
console.log('goodbye')
```

console.log('hewwo') // [!code --]
console.log('hello') // [!code ++]
console.log('goodbye')

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

console.log('Not highlighted')
console.log('Highlighted') // [!code highlight]
console.log('Not highlighted')

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

// [!code highlight:3]
console.log('Highlighted')
console.log('Highlighted')
console.log('Not highlighted')

```ts
//⠀[!code word:Hello]
const message = 'Hello World'
console.log(message) // prints⠀Hello World
```

// [!code word:Hello]
const message = 'Hello World'
console.log(message) // prints Hello World

```ts
console.log('Not focused');
console.log('Focused') //⠀[!code focus]
console.log('Not focused');
```

console.log('Not focused');
console.log('Focused') // [!code focus]
console.log('Not focused');

```ts
//⠀[!code focus:3]
console.log('Focused')
console.log('Focused')
console.log('Not focused')
```

// [!code focus:3]
console.log('Focused')
console.log('Focused')
console.log('Not focused')

```ts
console.log('No errors or warnings')
console.error('Error') //⠀[!code error]
console.warn('Warning') //⠀[!code warning]
```

console.log('No errors or warnings')
console.error('Error') // [!code error]
console.warn('Warning') // [!code warning]

```js {1,3-4}
console.log('1')
console.log('2')
console.log('3')
console.log('4')
```

console.log('1')
console.log('2')
console.log('3')
console.log('4')

```js /Hello/
const msg = 'Hello World'
console.log(msg)
console.log(msg) // prints Hello World
```

const msg = 'Hello World'
console.log(msg)
console.log(msg) // prints Hello World

Code component

we provide a code block component auto-imported with some styles like browser

const msg = 'Hello World'
console.log(msg)
console.log(msg) // prints Hello World

<Code code={`console.log("hello world")`} lang="js" />

console.log("hello world")