shiki, twoslash and MDX components

MDX components

Code Group

export const repoName = 'blog'
export const repoOwner = 'zhangyu1818'
export const site = 'https://zhangyu.dev'

Details

Details Block

<Details summary="Details">

Details Block

```yml graphql.config.yml
schema:
  - https://api.github.com/graphql:
      headers:
        Authorization: Bearer ${GITHUB_TOKEN}
documents: '**/*.ts'
```

Details block is a collapsible component.

</Details>

Details block is a collapsible component.

Github Alerts

note

Useful information that users should know, even when skimming content.

tip

Helpful advice for doing things better or more easily.

important

Key information users need to know to achieve their goal.

warning

Urgent info that needs immediate user attention to avoid problems.

caution

Advises about risks or negative outcomes of certain actions.

Shiki

Twoslash


interface Todo {
  : string
}

const : <Todo> = {
  : 'Delete inactive users'.(),
}

.title = 'Hello'Cannot assign to 'title' because it is a read-only property.

.p('123', 10)

Custom log message
const  = 1
Custom error message
const  = 1
Custom warning message
const  = 1
Custom annotation message

Shiki Transformers

`transformerNotationDiff`

console.log('hewwo') 
console.log('hello') 
console.log('goodbye')

`transformerNotationHighlight`

console.log('Not highlighted')
console.log('Highlighted') 
console.log('Not highlighted')


console.log('Highlighted')
console.log('Highlighted')
console.log('Not highlighted')

`transformerNotationWordHighlight`

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

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

`transformerNotationFocus`

console.log('Not focused')
console.log('Focused') 
console.log('Not focused')


console.log('Focused')
console.log('Focused')
console.log('Not focused')

`transformerNotationErrorLevel`

console.log('No errors or warnings')
console.error('Error') 
console.warn('Warning')

`transformerMetaHighlight`

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

`transformerMetaWordHighlight`

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