feat: rename shiki packages

pull/3506/head
Anthony Fu 2 years ago
parent 420efec4d7
commit e54b9b0d17

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

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

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

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

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

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

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

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

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

Loading…
Cancel
Save