shiki, twoslash and MDX components

[zhangyu1818]

MDX components

Code Group

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

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

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

// @errors: 2540
interface Todo {
  title: string
}

const todo: Readonly<Todo> = {
  title: 'Delete inactive users'.toUpperCase(),
  //  ^?
}

todo.title = 'Hello'

Number.parseInt('123', 10)
//      ^|

// @log: Custom log message
const a = 1
// @error: Custom error message
const b = 1
// @warn: Custom warning message
const c = 1
// @annotate: Custom annotation message

---

Shiki Transformers

transformerNotationDiff

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

---

transformerNotationHighlight

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

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

---

transformerNotationWordHighlight

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

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

---

transformerNotationFocus

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

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

---

transformerNotationErrorLevel

console.log('No errors or warnings')
console.error('Error') // [!code error]
console.warn('Warning') // [!code 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