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**