feat: rename shiki packages (#3506)

BREAKING CHANGE: vitepress now uses shiki instead of shikiji. If you’re on the latest version and using shikiji specific features, you just need to change imports. The shikijiSetup hook is renamed to shikiSetup.
vuejs · Jan 27, 2024 · b8487d3 · b8487d3
1 parent e060617
commit b8487d3
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 47 deletions.
diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md
@@ -301,7 +301,7 @@ VitePress also supports [GitHub-flavored alerts](https://docs.github.com/en/get-
 
 ## Syntax Highlighting in Code Blocks
 
-VitePress uses [Shikiji](https://github.com/antfu/shikiji) (an improved version of [Shiki](https://shiki.matsu.io/)) to highlight language syntax in Markdown code blocks, using coloured text. Shiki supports a wide variety of programming languages. All you need to do is append a valid language alias to the beginning backticks for the code block:
+VitePress uses [Shiki](https://github.com/shikijs/shiki) to highlight language syntax in Markdown code blocks, using coloured text. Shiki supports a wide variety of programming languages. All you need to do is append a valid language alias to the beginning backticks for the code block:
 
 **Input**
 
@@ -341,7 +341,7 @@ export default {
 </ul>
 ```
 
-A [list of valid languages](https://github.com/antfu/shikiji/blob/main/docs/languages.md) is available on Shikiji's repository.
+A [list of valid languages](https://shiki.style/languages) is available on Shiki's repository.
 
 You may also customize syntax highlight theme in app config. Please see [`markdown` options](../reference/site-config#markdown) for more details.
 

diff --git a/docs/reference/site-config.md b/docs/reference/site-config.md
@@ -510,7 +510,7 @@ When using the default theme, enabling this option will display each page's last
 
 - Type: `MarkdownOption`
 
-Configure Markdown parser options. VitePress uses [Markdown-it](https://github.com/markdown-it/markdown-it) as the parser, and [Shikiji](https://github.com/antfu/shikiji) (an improved version of [Shiki](https://shiki.matsu.io/)) to highlight language syntax. Inside this option, you may pass various Markdown related options to fit your needs.
+Configure Markdown parser options. VitePress uses [Markdown-it](https://github.com/markdown-it/markdown-it) as the parser, and [Shiki](https://github.com/shikijs/shiki) to highlight language syntax. Inside this option, you may pass various Markdown related options to fit your needs.
 
 ```js
 export default {

diff --git a/docs/zh/guide/markdown.md b/docs/zh/guide/markdown.md
@@ -301,7 +301,7 @@ VitePress 同样支持以标注的方式渲染 [GitHub 风格的警报](https://
 
 ## 代码块中的语法高亮 {#syntax-highlighting-in-code-blocks}
 
-VitePress 使用 [Shikiji](https://github.com/antfu/shikiji) ([Shiki](https://shiki.matsu.io/) 的改进版本) 在 Markdown 代码块中使用彩色文本实现语法高亮。Shiki 支持多种编程语言。需要做的就是将有效的语言别名附加到代码块的开头：
+VitePress 使用 [Shiki](https://github.com/shikijs/shiki) 在 Markdown 代码块中使用彩色文本实现语法高亮。Shiki 支持多种编程语言。需要做的就是将有效的语言别名附加到代码块的开头：
 
 **输入**
 
@@ -341,7 +341,7 @@ export default {
 </ul>
 ```
 
-在 Shikiji 的代码仓库中，可以找到[合法的编程语言列表](https://github.com/antfu/shikiji/blob/main/docs/languages.md)。
+在 Shiki 的代码仓库中，可以找到[合法的编程语言列表](https://shiki.style/languages)。
 
 还可以全局配置中自定义语法高亮主题。有关详细信息，参见 [`markdown` 选项](../reference/site-config#markdown)得到更多信息。
 

diff --git a/docs/zh/reference/site-config.md b/docs/zh/reference/site-config.md
@@ -510,7 +510,7 @@ export default {
 
 - 类型：`MarkdownOption`
 
-配置 Markdown 解析器选项。VitePress 使用 [Markdown-it](https://github.com/markdown-it/markdown-it) 作为解析器，使用 [Shikiji](https://github.com/antfu/shikiji) ([Shiki](https://shiki.matsu.io/) 的改进版本) 来高亮不同语言语法。在此选项中，可以传递各种 Markdown 相关选项以满足你的需要。
+配置 Markdown 解析器选项。VitePress 使用 [Markdown-it](https://github.com/markdown-it/markdown-it) 作为解析器，使用 [Shiki](https://github.com/shikijs/shiki) 来高亮不同语言语法。在此选项中，可以传递各种 Markdown 相关选项以满足你的需要。
 
 ```js
 export default {

diff --git a/package.json b/package.json
@@ -102,9 +102,9 @@
     "focus-trap": "^7.5.4",
     "mark.js": "8.11.1",
     "minisearch": "^6.3.0",
-    "shikiji": "^0.10.0",
-    "shikiji-core": "^0.10.0",
-    "shikiji-transformers": "^0.10.0",
+    "shiki": "^1.0.0-beta.0",
+    "@shikijs/core": "^1.0.0-beta.0",
+    "@shikijs/transformers": "^1.0.0-beta.0",
     "vite": "^5.0.12",
     "vue": "^3.4.15"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/node/markdown/markdown.ts b/src/node/markdown/markdown.ts
@@ -23,9 +23,9 @@ import type {
   BuiltinTheme,
   Highlighter,
   LanguageInput,
-  ShikijiTransformer,
+  ShikiTransformer,
   ThemeRegistrationAny
-} from 'shikiji'
+} from 'shiki'
 import type { Logger } from 'vite'
 import { containerPlugin, type ContainerOptions } from './plugins/containers'
 import { highlight } from './plugins/highlight'
@@ -75,21 +75,21 @@ export interface MarkdownOptions extends MarkdownIt.Options {
    * @example { theme: { light: 'github-light', dark: 'github-dark' } }
    *
    * You can use an existing theme.
-   * @see https://github.com/antfu/shikiji/blob/main/docs/themes.md#all-themes
+   * @see https://shiki.style/themes
    * Or add your own theme.
-   * @see https://github.com/antfu/shikiji/blob/main/docs/themes.md#load-custom-themes
+   * @see https://shiki.style/guide/load-theme
    */
   theme?: ThemeOptions
   /**
    * Languages for syntax highlighting.
-   * @see https://github.com/antfu/shikiji/blob/main/docs/languages.md#all-themes
+   * @see https://shiki.style/languages
    */
   languages?: LanguageInput[]
   /**
    * Custom language aliases.
    *
    * @example { 'my-lang': 'js' }
-   * @see https://github.com/antfu/shikiji/tree/main#custom-language-aliases
+   * @see https://shiki.style/guide/load-lang#custom-language-aliases
    */
   languageAlias?: Record<string, string>
   /**
@@ -103,13 +103,13 @@ export interface MarkdownOptions extends MarkdownIt.Options {
   defaultHighlightLang?: string
   /**
    * Transformers applied to code blocks
-   * @see https://github.com/antfu/shikiji#hast-transformers
+   * @see https://shiki.style/guide/transformers
    */
-  codeTransformers?: ShikijiTransformer[]
+  codeTransformers?: ShikiTransformer[]
   /**
-   * Setup Shikiji instance
+   * Setup Shiki instance
    */
-  shikijiSetup?: (shikiji: Highlighter) => void | Promise<void>
+  shikiSetup?: (shiki: Highlighter) => void | Promise<void>
 
   /* ==================== Markdown It Plugins ==================== */
 

diff --git a/src/node/markdown/plugins/highlight.ts b/src/node/markdown/plugins/highlight.ts
@@ -1,21 +1,21 @@
 import { customAlphabet } from 'nanoid'
 import c from 'picocolors'
-import type { ShikijiTransformer } from 'shikiji'
+import type { ShikiTransformer } from 'shiki'
 import {
   addClassToHast,
   bundledLanguages,
   getHighlighter,
   isPlaintext as isPlainLang,
   isSpecialLang
-} from 'shikiji'
+} from 'shiki'
 import {
   transformerCompactLineOptions,
   transformerNotationDiff,
   transformerNotationErrorLevel,
   transformerNotationFocus,
   transformerNotationHighlight,
   type TransformerCompactLineOption
-} from 'shikiji-transformers'
+} from '@shikijs/transformers'
 import type { Logger } from 'vite'
 import type { MarkdownOptions, ThemeOptions } from '../markdown'
 
@@ -72,9 +72,9 @@ export async function highlight(
     langAlias: options.languageAlias
   })
 
-  await options?.shikijiSetup?.(highlighter)
+  await options?.shikiSetup?.(highlighter)
 
-  const transformers: ShikijiTransformer[] = [
+  const transformers: ShikiTransformer[] = [
     transformerNotationDiff(),
     transformerNotationFocus({
       classActiveLine: 'has-focus',

diff --git a/template/markdown-examples.md b/template/markdown-examples.md
@@ -4,7 +4,7 @@ This page demonstrates some of the built-in markdown extensions provided by Vite
 
 ## Syntax Highlighting
 
-VitePress provides Syntax Highlighting powered by [Shikiji](https://github.com/antfu/shikiji), with additional features like line-highlighting:
+VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
 
 **Input**