.gitignore

@@ -15,3 +15,4 @@ packages/shiki/src/assets/themes
 packages/shiki/src/assets/*.json
 cache
 .eslintcache
+report-engine-js-compat.json

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "antfu.pnpm-catalog-lens"
+  ]
+}

.vscode/settings.json

@@ -1,7 +1,4 @@
 {
-  // Enable the flat config support
-  "eslint.experimental.useFlatConfig": true,
-
   // Disable the default formatter
   "prettier.enable": false,
   "editor.formatOnSave": false,

bench/engines.bench.ts

@@ -0,0 +1,39 @@
+import fs from 'node:fs/promises'
+import { bench, describe } from 'vitest'
+import type { BundledLanguage } from 'shiki'
+import { createHighlighter, createJavaScriptRegexEngine, createWasmOnigEngine } from 'shiki'
+import type { ReportItem } from '../scripts/report-engine-js-compat'
+
+describe('engines', async () => {
+  const js = createJavaScriptRegexEngine()
+  const wasm = await createWasmOnigEngine(() => import('shiki/wasm'))
+
+  // Run `npx jiti scripts/report-engine-js-compat.ts` to generate the report first
+  const report = await fs.readFile('../scripts/report-engine-js-compat.json', 'utf-8').then(JSON.parse) as ReportItem[]
+  const langs = report.filter(i => i.highlightMatch === true).map(i => i.lang) as BundledLanguage[]
+  const samples = await Promise.all(langs.map(lang => fs.readFile(`../tm-grammars-themes/samples/${lang}.sample`, 'utf-8')))
+
+  const shikiJs = await createHighlighter({
+    langs,
+    themes: ['vitesse-dark'],
+    engine: js,
+  })
+
+  const shikiWasm = await createHighlighter({
+    langs,
+    themes: ['vitesse-dark'],
+    engine: wasm,
+  })
+
+  bench('js', () => {
+    for (const lang of langs) {
+      shikiJs.codeToTokensBase(samples[langs.indexOf(lang)], { lang, theme: 'vitesse-dark' })
+    }
+  }, { warmupIterations: 10, iterations: 30 })
+
+  bench('wasm', () => {
+    for (const lang of langs) {
+      shikiWasm.codeToTokensBase(samples[langs.indexOf(lang)], { lang, theme: 'vitesse-dark' })
+    }
+  }, { warmupIterations: 10, iterations: 30 })
+})

docs/.vitepress/config.ts

@@ -35,6 +35,7 @@ const INTEGRATIONS: DefaultTheme.NavItemWithLink[] = [
   { text: 'Monaco Editor', link: '/packages/monaco' },
   { text: 'VitePress', link: '/packages/vitepress' },
   { text: 'Nuxt', link: '/packages/nuxt' },
+  { text: 'Next', link: '/packages/next' },
   { text: 'Astro', link: '/packages/astro' },
   { text: 'Common Transformers', link: '/packages/transformers' },
   { text: 'CLI', link: '/packages/cli' },

docs/package.json

@@ -7,21 +7,21 @@
     "docs:preview": "vitepress preview"
   },
   "dependencies": {
-    "@iconify-json/ph": "^1.1.14",
-    "fuse.js": "^7.0.0"
+    "@iconify-json/ph": "catalog:",
+    "fuse.js": "catalog:"
   },
   "devDependencies": {
-    "@iconify-json/svg-spinners": "^1.1.3",
+    "@iconify-json/svg-spinners": "catalog:",
     "@shikijs/transformers": "workspace:*",
-    "@shikijs/twoslash": "workspace:*",
-    "@unocss/reset": "^0.62.2",
-    "@vueuse/core": "^10.11.1",
-    "floating-vue": "^5.2.2",
-    "pinia": "^2.2.2",
+    "@shikijs/twoslash": "catalog:",
+    "@unocss/reset": "catalog:",
+    "@vueuse/core": "catalog:",
+    "floating-vue": "catalog:",
+    "pinia": "catalog:",
     "shiki": "workspace:*",
-    "unocss": "^0.62.2",
-    "unplugin-vue-components": "^0.27.4",
-    "vitepress": "^1.3.3",
-    "vue": "^3.4.38"
+    "unocss": "catalog:",
+    "unplugin-vue-components": "catalog:",
+    "vitepress": "catalog:",
+    "vue": "catalog:"
   }
 }

docs/packages/next.md

@@ -0,0 +1,166 @@
+# Next.js
+
+Shiki does not provide an official integration for [Next.js](https://nextjs.org), but it is rather straightforward to use Shiki in Next.js applications.
+
+::: info
+Using Shiki on Edge Runtime might cause unintended problems, Shiki relies on lazy imports to load languages and themes.
+
+Serverless Runtime is recommended.
+:::
+
+## React Server Component
+
+Since Server Components are server-only, you can use the bundled highlighter without worrying the bundle size.
+
+```tsx
+import { codeToHtml } from 'shiki'
+
+export default function Page() {
+  return (
+    <main>
+      <CodeBlock />
+    </main>
+  )
+}
+
+async function CodeBlock() {
+  const out = await codeToHtml('console.log("Hello World")', {
+    lang: 'ts',
+    theme: 'github-dark'
+  })
+
+  return <div dangerouslySetInnerHTML={{ __html: out }} />
+}
+```
+
+### Custom Components
+
+You can also call `codeToHast` to get the HTML abstract syntax tree, and render it using [`hast-util-to-jsx-runtime`](https://github.com/syntax-tree/hast-util-to-jsx-runtime). With this method, you can render your own `pre` and `code` components.
+
+```tsx
+import { codeToHast } from 'shiki'
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime'
+import { Fragment } from 'react'
+// @ts-expect-error -- untyped
+import { jsx, jsxs } from 'react/jsx-runtime'
+
+export default function Page() {
+  return (
+    <main>
+      <CodeBlock />
+    </main>
+  )
+}
+
+async function CodeBlock() {
+  const out = await codeToHast('console.log("Hello World")', {
+    lang: 'ts',
+    theme: 'github-dark'
+  })
+
+  return toJsxRuntime(out, {
+    Fragment,
+    jsx,
+    jsxs,
+    components: {
+      // your custom `pre` element
+      pre: props => <pre data-custom-codeblock {...props} />
+    },
+  })
+}
+```
+
+## React Client Component
+
+For client components, they are pre-rendered on server and hydrated/rendered on client.
+We can start by creating a client `CodeBlock` component.
+
+Create a `shared.ts` for highlighter:
+
+```ts
+import { codeToHast } from 'shiki/bundle/web'
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime'
+import { Fragment } from 'react'
+// @ts-expect-error -- untyped
+import { jsx, jsxs } from 'react/jsx-runtime'
+
+export async function highlight(code: string) {
+  const out = await codeToHast(code, {
+    lang: 'ts',
+    theme: 'github-dark'
+  })
+
+  return toJsxRuntime(out, {
+    Fragment,
+    jsx,
+    jsxs,
+  })
+}
+```
+
+In your `codeblock.tsx`:
+
+```tsx
+'use client'
+import { useLayoutEffect, useState } from 'react'
+import { highlight } from './shared'
+
+export function CodeBlock({ initial }: { initial?: JSX.Element }) {
+  const [nodes, setNodes] = useState(initial)
+
+  useLayoutEffect(() => {
+    void highlight('console.log("Rendered on client")').then(setNodes)
+  }, [])
+
+  return nodes ?? <p>Loading...</p>
+}
+```
+
+The `initial` prop can be passed from a server component to pre-render the code block on server.
+
+In your `page.tsx`:
+
+```tsx
+import { CodeBlock } from './codeblock'
+import { highlight } from './shared'
+
+export default async function Page() {
+  // `initial` is optional.
+  return (
+    <main>
+      <CodeBlock initial={await highlight('console.log("Rendered on server")')} />
+    </main>
+  )
+}
+```
+
+::: info
+The above example uses the `shiki/bundle/web` bundle. You can change it to [Fine-grained Bundle](/guide/install#fine-grained-bundle) to fully control the bundled languages/themes.
+:::
+
+### Performance
+
+Shiki lazy loads the requested languages and themes, the Next.js bundler can handle lazy imports automatically.
+Importing `shiki` or its web bundle is efficient enough for most Next.js applications, Fine-grained Bundle won't significantly impact the bundle size.
+
+In addition, you can use the `createHighlighter` API to preload specific languages and themes.
+Please refer to [Highlighter Usage](/guide/install#highlighter-usage) for further details.
+
+### Highlighter Instance
+
+If you define a highlighter (without `await`) as a global variable, you can reference it directly from server and client components.
+
+```ts
+import { createHighlighter } from 'shiki'
+
+const highlighter = createHighlighter({
+  themes: ['nord'],
+  langs: ['javascript'],
+})
+
+// Inside an async server component, or client side `useEffect`
+const html = (await highlighter).codeToHtml('const a = 1', {
+  lang: 'javascript',
+  theme: 'nord'
+})
+```

docs/packages/rehype.md

@@ -97,3 +97,39 @@ console.log('3') // highlighted
 console.log('4') // highlighted
 ```
 ````
+
+### Inline Code
+
+You can also highlight inline codes with the `inline` option.
+
+| Option                  | Example          | Description                                                 |
+| ----------------------- | ---------------- | ----------------------------------------------------------- |
+| `false`                 | -                | Disable inline code highlighting (default)                  |
+| `'tailing-curly-colon'` | `let a = 1{:js}` | Highlight with a `{:language}` marker inside the code block |
+
+Enable `inline` on the Rehype plugin:
+
+```ts twoslash
+// @noErrors: true
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import rehypeStringify from 'rehype-stringify'
+import rehypeShiki from '@shikijs/rehype'
+
+const file = await unified()
+  .use(remarkParse)
+  .use(remarkRehype)
+  .use(rehypeShiki, {
+    inline: 'tailing-curly-colon', // or other options
+    // ...
+  })
+  .use(rehypeStringify)
+  .process(await fs.readFile('./input.md'))
+```
+
+Then you can use inline code in markdown:
+
+```md
+This code `console.log("Hello World"){:js}` will be highlighted.
+```