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.
pull/3281/merge
Anthony Fu 11 months ago committed by GitHub
parent e060617528
commit b8487d3a97
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -301,7 +301,7 @@ VitePress also supports [GitHub-flavored alerts](https://docs.github.com/en/get-
## Syntax Highlighting in Code Blocks ## 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** **Input**
@ -341,7 +341,7 @@ export default {
</ul> </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. You may also customize syntax highlight theme in app config. Please see [`markdown` options](../reference/site-config#markdown) for more details.

@ -510,7 +510,7 @@ When using the default theme, enabling this option will display each page's last
- Type: `MarkdownOption` - 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 ```js
export default { export default {

@ -301,7 +301,7 @@ VitePress 同样支持以标注的方式渲染 [GitHub 风格的警报](https://
## 代码块中的语法高亮 {#syntax-highlighting-in-code-blocks} ## 代码块中的语法高亮 {#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> </ul>
``` ```
在 Shikiji 的代码仓库中,可以找到[合法的编程语言列表](https://github.com/antfu/shikiji/blob/main/docs/languages.md)。 在 Shiki 的代码仓库中,可以找到[合法的编程语言列表](https://shiki.style/languages)。
还可以全局配置中自定义语法高亮主题。有关详细信息,参见 [`markdown` 选项](../reference/site-config#markdown)得到更多信息。 还可以全局配置中自定义语法高亮主题。有关详细信息,参见 [`markdown` 选项](../reference/site-config#markdown)得到更多信息。

@ -510,7 +510,7 @@ export default {
- 类型:`MarkdownOption` - 类型:`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 ```js
export default { export default {

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

@ -17,6 +17,12 @@ importers:
'@docsearch/js': '@docsearch/js':
specifier: ^3.5.2 specifier: ^3.5.2
version: 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': '@types/markdown-it':
specifier: ^13.0.7 specifier: ^13.0.7
version: 13.0.7 version: 13.0.7
@ -41,15 +47,9 @@ importers:
minisearch: minisearch:
specifier: ^6.3.0 specifier: ^6.3.0
version: 6.3.0 version: 6.3.0
shikiji: shiki:
specifier: ^0.10.0 specifier: ^1.0.0-beta.0
version: 0.10.0 version: 1.0.0-beta.0
shikiji-core:
specifier: ^0.10.0
version: 0.10.0
shikiji-transformers:
specifier: ^0.10.0
version: 0.10.0
vite: vite:
specifier: ^5.0.12 specifier: ^5.0.12
version: 5.0.12(@types/node@20.11.5) version: 5.0.12(@types/node@20.11.5)
@ -1091,6 +1091,16 @@ packages:
requiresBuild: true requiresBuild: true
optional: 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: /@sideway/address@4.1.4:
resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==} resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==}
dependencies: dependencies:
@ -4160,20 +4170,10 @@ packages:
resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==} resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
dev: true dev: true
/shikiji-core@0.10.0: /shiki@1.0.0-beta.0:
resolution: {integrity: sha512-imG+bvRkuNlZUi2q9tMVfegRRouTpDxMFejpfF/6J+bFX3NDKtlW9T9iIAkBYnw4pcCtSwirW0AvkwlQR4wyxg==} resolution: {integrity: sha512-CcP0IhEDQ3LWfJC44cfxfId9pjJi9Nephl8DxgrL4tKWprI/oz6deZyL0vB+XWxhTx/1uonzWQKaSQPwKx5dTA==}
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==}
dependencies: dependencies:
shikiji-core: 0.10.0 '@shikijs/core': 1.0.0-beta.0
dev: false dev: false
/side-channel@1.0.4: /side-channel@1.0.4:

@ -23,9 +23,9 @@ import type {
BuiltinTheme, BuiltinTheme,
Highlighter, Highlighter,
LanguageInput, LanguageInput,
ShikijiTransformer, ShikiTransformer,
ThemeRegistrationAny ThemeRegistrationAny
} from 'shikiji' } from 'shiki'
import type { Logger } from 'vite' import type { Logger } from 'vite'
import { containerPlugin, type ContainerOptions } from './plugins/containers' import { containerPlugin, type ContainerOptions } from './plugins/containers'
import { highlight } from './plugins/highlight' import { highlight } from './plugins/highlight'
@ -75,21 +75,21 @@ export interface MarkdownOptions extends MarkdownIt.Options {
* @example { theme: { light: 'github-light', dark: 'github-dark' } } * @example { theme: { light: 'github-light', dark: 'github-dark' } }
* *
* You can use an existing theme. * 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. * 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 theme?: ThemeOptions
/** /**
* Languages for syntax highlighting. * Languages for syntax highlighting.
* @see https://github.com/antfu/shikiji/blob/main/docs/languages.md#all-themes * @see https://shiki.style/languages
*/ */
languages?: LanguageInput[] languages?: LanguageInput[]
/** /**
* Custom language aliases. * Custom language aliases.
* *
* @example { 'my-lang': 'js' } * @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> languageAlias?: Record<string, string>
/** /**
@ -103,13 +103,13 @@ export interface MarkdownOptions extends MarkdownIt.Options {
defaultHighlightLang?: string defaultHighlightLang?: string
/** /**
* Transformers applied to code blocks * 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 ==================== */ /* ==================== Markdown It Plugins ==================== */

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

@ -4,7 +4,7 @@ This page demonstrates some of the built-in markdown extensions provided by Vite
## Syntax Highlighting ## 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** **Input**

Loading…
Cancel
Save