From b8487d3a97679f5b2eb225ee1eb85754b66fee30 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sat, 27 Jan 2024 07:02:14 +0100 Subject: [PATCH] feat: rename shiki packages (#3506) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- docs/guide/markdown.md | 4 +-- docs/reference/site-config.md | 2 +- docs/zh/guide/markdown.md | 4 +-- docs/zh/reference/site-config.md | 2 +- package.json | 6 ++-- pnpm-lock.yaml | 44 +++++++++++++------------- src/node/markdown/markdown.ts | 20 ++++++------ src/node/markdown/plugins/highlight.ts | 10 +++--- template/markdown-examples.md | 2 +- 9 files changed, 47 insertions(+), 47 deletions(-) diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md index 25a7ee66..d5b68de6 100644 --- 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 { ``` -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 index a83f04f4..ec853063 100644 --- 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 index 8aecda68..99b370b1 100644 --- 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 { ``` -在 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 index 583a951c..56b46928 100644 --- 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 index 40012206..38a536a6 100644 --- 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 index a7a01be7..84a0f2fd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,12 @@ importers: '@docsearch/js': specifier: ^3.5.2 version: 3.5.2 + '@shikijs/core': + specifier: ^1.0.0-beta.0 + version: 1.0.0-beta.0 + '@shikijs/transformers': + specifier: ^1.0.0-beta.0 + version: 1.0.0-beta.0 '@types/markdown-it': specifier: ^13.0.7 version: 13.0.7 @@ -41,15 +47,9 @@ importers: minisearch: specifier: ^6.3.0 version: 6.3.0 - shikiji: - specifier: ^0.10.0 - version: 0.10.0 - shikiji-core: - specifier: ^0.10.0 - version: 0.10.0 - shikiji-transformers: - specifier: ^0.10.0 - version: 0.10.0 + shiki: + specifier: ^1.0.0-beta.0 + version: 1.0.0-beta.0 vite: specifier: ^5.0.12 version: 5.0.12(@types/node@20.11.5) @@ -1091,6 +1091,16 @@ packages: requiresBuild: true optional: true + /@shikijs/core@1.0.0-beta.0: + resolution: {integrity: sha512-uicyrkx379Q5sxQuGV3kduHPWIAkjxmeA5A4J6syscx8wiEyIV06i/Q6s9GeKLCb857Hi90H8e/FoFSbcjnZsw==} + dev: false + + /@shikijs/transformers@1.0.0-beta.0: + resolution: {integrity: sha512-OvIO6RxQ7YaQhp34uXVKUPZDRdTcGwBgX3zn26haSvqPwrTQcxdPgT47sr4u3sz1+RwN3RO9AGxCJFRKNpB+Qw==} + dependencies: + shiki: 1.0.0-beta.0 + dev: false + /@sideway/address@4.1.4: resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==} dependencies: @@ -4160,20 +4170,10 @@ packages: resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==} dev: true - /shikiji-core@0.10.0: - resolution: {integrity: sha512-imG+bvRkuNlZUi2q9tMVfegRRouTpDxMFejpfF/6J+bFX3NDKtlW9T9iIAkBYnw4pcCtSwirW0AvkwlQR4wyxg==} - dev: false - - /shikiji-transformers@0.10.0: - resolution: {integrity: sha512-x9oYybeF/XOrIc6Mm8G1gU5ezunMxdgD4WwBTKrZ5tAmFFaNIWCjwZENgRt1uR4iMi0+pGH0g9bmrbraSC41nA==} - dependencies: - shikiji: 0.10.0 - dev: false - - /shikiji@0.10.0: - resolution: {integrity: sha512-1dAzIOWbtM7B4Sem5BvE+CEdsebDsRA34SfCxM4qJ4PLgR73ZD92VEtNfbcoZ3xOLSqvtV0J9i4WpCgVsmQteg==} + /shiki@1.0.0-beta.0: + resolution: {integrity: sha512-CcP0IhEDQ3LWfJC44cfxfId9pjJi9Nephl8DxgrL4tKWprI/oz6deZyL0vB+XWxhTx/1uonzWQKaSQPwKx5dTA==} dependencies: - shikiji-core: 0.10.0 + '@shikijs/core': 1.0.0-beta.0 dev: false /side-channel@1.0.4: diff --git a/src/node/markdown/markdown.ts b/src/node/markdown/markdown.ts index bf81f38d..61acb9db 100644 --- 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 /** @@ -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 + shikiSetup?: (shiki: Highlighter) => void | Promise /* ==================== Markdown It Plugins ==================== */ diff --git a/src/node/markdown/plugins/highlight.ts b/src/node/markdown/plugins/highlight.ts index 29171f2a..a6015dbf 100644 --- a/src/node/markdown/plugins/highlight.ts +++ b/src/node/markdown/plugins/highlight.ts @@ -1,13 +1,13 @@ 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, @@ -15,7 +15,7 @@ import { 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 index 3ea9aa9f..f9258a55 100644 --- 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**