update summary.json

summary.json

@@ -63,5 +63,6 @@
   "126": "Guide to creating React Native modules in TypeScript with Swift/Kotlin, iOS/Android, and data exchange.",
   "127": "Swift 5.5 introduces Swift Concurrency with async/await syntax similar to web frontend async, simplifying asynchronous programming.",
   "128": "Explanations of the history package in JavaScript, including pushState and replaceState methods, and a brief overview of how React Router uses history for navigation.",
-  "132": "Rebuilding my blog with React Server Components and GitHub Discussions for a cutting-edge, backend-free, visually appealing experience."
+  "132": "Rebuilding my blog with React Server Components and GitHub Discussions for a cutting-edge, backend-free, visually appealing experience.",
+  "133": "Integrate @shikijs/twoslash, @shikijs/transforms, add mdx components."
 }

test.md

@@ -0,0 +1,183 @@
+### Code Group
+
+<CodeGroup >
+
+```ts blog-config.ts
+export const repoName = 'blog'
+export const repoOwner = 'zhangyu1818'
+export const site = 'https://zhangyu.dev'
+```
+
+```yml graphql.config.yml
+schema:
+  - https://api.github.com/graphql:
+      headers:
+        Authorization: Bearer ${GITHUB_TOKEN}
+documents: '**/*.ts'
+```
+
+</CodeGroup>
+
+### Details
+
+<Details summary="Details">
+
+Details Block
+
+````md
+<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.
+
+</Details>
+
+### 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.
+
+### Twoslash
+
+```ts twoslash
+// @errors: 2540
+interface Todo {
+  title: string
+}
+
+const todo: Readonly<Todo> = {
+  title: 'Delete inactive users'.toUpperCase(),
+  //  ^?
+}
+
+todo.title = 'Hello'
+
+Number.parseInt('123', 10)
+//      ^|
+```
+
+```ts twoslash
+// @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`
+
+```ts
+console.log('hewwo') // [!code --]
+console.log('hello') // [!code ++]
+console.log('goodbye')
+```
+
+---
+
+#### `transformerNotationHighlight`
+
+```ts
+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')
+```
+
+---
+
+#### `transformerNotationWordHighlight`
+
+```ts
+// [!code word:Hello]
+const message = 'Hello World'
+console.log(message) // prints Hello World
+```
+
+```ts
+// [!code word:Hello:1]
+const message = 'Hello World'
+console.log(message) // prints Hello World
+```
+
+---
+
+#### `transformerNotationFocus`
+
+```ts
+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')
+```
+
+---
+
+#### `transformerNotationErrorLevel`
+
+```ts
+console.log('No errors or warnings')
+console.error('Error') // [!code error]
+console.warn('Warning') // [!code warning]
+```
+
+---
+
+#### `transformerMetaHighlight`
+
+```js {1,3-4}
+console.log('1')
+console.log('2')
+console.log('3')
+console.log('4')
+```
+
+#### `transformerMetaWordHighlight`
+
+```js /Hello/
+const msg = 'Hello World'
+console.log(msg) // prints Hello World
+```