msb-public
/
vitepress
mirror of https://github.com/vuejs/vitepress
2
1
Code Issues Projects Releases Wiki Activity

feat: rename shiki packages (#3506)

Browse Source 
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
9 changed files with 47 additions and 47 deletions
Show Stats Download Patch File Download Diff File

4
docs/guide/markdown.md
Unescape View File

@ -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.

2
docs/reference/site-config.md
Unescape View File

@ -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 {

4
docs/zh/guide/markdown.md
Unescape View File

@ -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)得到更多信息。

2
docs/zh/reference/site-config.md
Unescape View File

@ -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 {

6
package.json
Unescape View File

@ -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"
},

44
pnpm-lock.yaml
Unescape View File

@ -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:

20
src/node/markdown/markdown.ts
Unescape View File

@ -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 ==================== */

10
src/node/markdown/plugins/highlight.ts
Unescape View File

@ -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',

2
template/markdown-examples.md
Unescape View File

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

Write Preview
Loading…
Cancel
Save