chore: change to shiki again (#2658)

* chore: change to shiki again

* chore: update rehype plugin

* add changeset

Author: imranbarbhuiya

.changeset/mighty-items-cough.md

@@ -0,0 +1,5 @@
+---
+'nextra': minor
+---
+
+change to shiki again

docs/components/index-page/index.tsx

@@ -331,7 +331,7 @@ export const IndexPage = () => (
             </h3>
             <p>
               Performant and reliable build-time syntax highlighting powered by{' '}
-              <Link href="https://shiki.matsu.io">Shiki</Link>.
+              <Link href="https://shiki.style">Shiki</Link>.
             </p>
           </Feature>
           <Feature index={3} href="/docs/guide/i18n">

docs/pages/about.mdx

@@ -26,7 +26,7 @@ Nextra is powered by these incredible open source projects:
 - https://pnpm.io
 - https://tailwindcss.com
 - https://github.com/pacocoursey/next-themes
-- https://github.com/antfu/shikiji
+- https://github.com/shikijs/shiki
 - https://github.com/nextapps-de/flexsearch
 - https://github.com/atomiks/rehype-pretty-code
 - https://github.com/Brooooooklyn/simple-git

docs/pages/docs/guide/syntax-highlighting.mdx

@@ -3,7 +3,7 @@ import { Callout } from 'nextra/components'
 
 # Syntax Highlighting
 
-Nextra uses [Shiki](https://shiki.matsu.io) to do syntax highlighting at build
+Nextra uses [Shiki](https://shiki.style) to do syntax highlighting at build
 time. It's very reliable and performant. For example, adding this in your
 Markdown file:
 

examples/docs/src/pages/advanced/code-highlighting.mdx

@@ -1,6 +1,6 @@
 # Code Highlighting
 
-`Nextra` uses [Shiki](https://shiki.matsu.io) and
+`Nextra` uses [Shiki](https://shiki.style) and
 [Rehype Pretty Code](https://github.com/FormidableLabs/prism-react-renderer) to
 highlight the code blocks. This section covers how you can customze it.
 

packages/nextra/package.json

@@ -121,6 +121,7 @@
     "@mdx-js/mdx": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
     "@napi-rs/simple-git": "^0.1.9",
+    "@shikijs/twoslash": "^1.0.0",
     "@theguild/remark-mermaid": "^0.0.5",
     "@theguild/remark-npm2yarn": "0.3.0",
     "better-react-mathjax": "^2.0.3",
@@ -134,15 +135,14 @@
     "katex": "^0.16.9",
     "p-limit": "^4.0.0",
     "rehype-katex": "^7.0.0",
-    "rehype-pretty-code": "0.12.6",
+    "rehype-pretty-code": "0.13.0",
     "rehype-raw": "^7.0.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "remark-reading-time": "^2.0.1",
     "remark-smartypants": "^2.1.0",
-    "shikiji": "^0.10.2",
-    "shikiji-twoslash": "^0.10.2",
+    "shiki": "^1.0.0",
     "slash": "^5.1.0",
     "title": "^3.5.3",
     "unist-util-remove": "^4.0.0",

packages/nextra/src/server/compile.ts

@@ -2,6 +2,7 @@ import path from 'node:path'
 import type { ProcessorOptions } from '@mdx-js/mdx'
 import { createProcessor } from '@mdx-js/mdx'
 import type { Processor } from '@mdx-js/mdx/lib/core'
+import { rendererRich, transformerTwoslash } from '@shikijs/twoslash'
 import { remarkMermaid } from '@theguild/remark-mermaid'
 import { remarkNpm2Yarn } from '@theguild/remark-npm2yarn'
 import type { Program } from 'estree'
@@ -13,7 +14,6 @@ import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 import remarkReadingTime from 'remark-reading-time'
 import remarkSmartypants from 'remark-smartypants'
-import { rendererRich, transformerTwoslash } from 'shikiji-twoslash'
 import type { Pluggable, Plugin } from 'unified'
 import type {
   FrontMatter,

packages/nextra/src/server/rehype-plugins/rehype.ts

@@ -1,6 +1,6 @@
 import type { Element } from 'hast'
 import type { Options as RehypePrettyCodeOptions } from 'rehype-pretty-code'
-import { bundledLanguages, getHighlighter } from 'shikiji'
+import { bundledLanguages, getHighlighter } from 'shiki'
 import type { Plugin } from 'unified'
 import { visit } from 'unist-util-visit'