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') 
console.log('hello') 
console.log('goodbye')
```ts
console.log('Not highlighted')
console.log('Highlighted') //⠀[!code highlight]
console.log('Not highlighted')
```
console.log('Not highlighted')
console.log('Highlighted') 
console.log('Not highlighted')
```ts
//⠀[!code highlight:3]
console.log('Highlighted')
console.log('Highlighted')
console.log('Not highlighted')
```

console.log('Highlighted')
console.log('Highlighted')
console.log('Not highlighted')
```ts
//⠀[!code word:Hello]
const message = 'Hello World'
console.log(message) // prints⠀Hello World
```
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') 
console.log('Not focused');
```ts
//⠀[!code focus:3]
console.log('Focused')
console.log('Focused')
console.log('Not focused')
```

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') 
console.warn('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 porvide a code block component auto-imported with some styles like browser

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