docs: update docs

This commit is contained in:
pengzhanbo 2024-05-23 13:01:52 +08:00
parent 4cdd51a2c6
commit 7e1094b510
8 changed files with 107 additions and 16 deletions

View File

@ -97,7 +97,7 @@ export const zhNotes = definePlumeNotesConfig({
text: '内置插件',
dir: 'plugins',
collapsed: false,
items: ['', '代码复制', '代码高亮', '搜索', '阅读统计', 'markdown增强', 'markdownPower', '百度统计'],
items: ['', '代码高亮', '搜索', '阅读统计', 'markdown增强', 'markdownPower', '百度统计'],
},
],
},

View File

@ -7,6 +7,7 @@ readingTime: false
prev: false
next: false
article: false
externalLink: false
docs:
-
name: VuePress Plume

View File

@ -67,11 +67,61 @@ export default defineUserConfig({
### defaultHighlightLang
- 类型: `string`
- 默认值: `text`
- 类型 `string`
- 默认值 `text`
默认高亮的编程语言。当代码块未指定语言时使用。
### lineNumbers
- 类型:`boolean | number`
- 默认值: `true`
是否显示行号。
`true` 显示行号\
`false` 不显示行号\
`number` 指定需要显式代码行号的最小行数。
### copyCode
- 类型: `boolean | CopyCodeOptions`
- 默认值: `true`
是否允许复制代码。启用时,会在代码块右侧显示复制按钮。
```ts
interface CopyCodeOptions {
/**
* 复制成功后提示文本持续时间
*
* @default 2000
*/
duration?: number
/**
* 多语言配置
*/
locales?: {
[localePath: string]: {
/**
* 复制按钮标题
*
* @default 'Copy code'
*/
title?: string
/**
* 复制成功提示
*
* @default 'Copied'
*/
copied?: string
}
}
}
```
### codeTransformers
- 类型: `ShikiTransformer[]`

View File

@ -8,6 +8,52 @@ permalink: /guide/code/features/
主题在代码高亮功能上,进一步支持了更多的特性,它们能够帮助你的代码块更加具备表达力。
## 代码行号
主题默认显示代码行号,它通过 `plugins.shiki.line-numbers` 来控制。
```ts
export default defineUserConfig({
theme: plumeTheme({
plugins: {
shiki: { lineNumbers: true }
}
})
})
```
你还可以通过 `:line-numbers` / `:no-line-numbers` 来控制当前代码块是否显示代码行号。
**输入:**
````
```ts:line-numbers
// 启用行号
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```
```ts:no-line-numbers
// 行号已禁用
const line3 = 'This is line 3'
const line4 = 'This is line 4'
```
````
**输出:**
```ts:line-numbers
// 启用行号
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```
```ts:no-line-numbers
// 行号已禁用
const line3 = 'This is line 3'
const line4 = 'This is line 4'
```
## 在代码块中实现行高亮
`[lang]` 之后紧跟随 `{xxxx}` ,可以实现行高亮,其中 `xxx` 表示要高亮的行号。

View File

@ -18,7 +18,7 @@ import {
transformerRenderWhitespace,
} from '@shikijs/transformers'
import type { HighlighterOptions, ThemeOptions } from './types.js'
import { LRUCache, attrsToLines } from './utils/index.js'
import { LRUCache, attrsToLines, resolveLanguage } from './utils/index.js'
import { defaultHoverInfoProcessor, transformerTwoslash } from './twoslash/rendererTransformer.js'
const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 10)
@ -90,12 +90,12 @@ export async function highlight(
},
]
return (str: string, lang: string, attrs: string) => {
return (str: string, language: string, attrs: string) => {
attrs = attrs || ''
lang = lang || defaultLang
let lang = resolveLanguage(language) || defaultLang
const vPre = vueRE.test(lang) ? '' : 'v-pre'
const key = str + lang + attrs
const key = str + language + attrs
if (isDev) {
const rendered = cache.get(key)

View File

@ -149,7 +149,7 @@ export function setupPlugins(
plugins.push(searchPlugin(resolvedSearchOptions(app, options.search)))
}
const shikiOption = options.shiki || options.shikiji
const shikiOption = options.shiki
let shikiTheme: any = { light: 'vitesse-light', dark: 'vitesse-dark' }
if (shikiOption !== false) {
shikiTheme = shikiOption?.theme ?? shikiTheme

View File

@ -1,6 +1,6 @@
import type { Page, Theme } from 'vuepress/core'
import { logger, templateRenderer } from 'vuepress/utils'
import { addViteConfig, isPlainObject } from '@vuepress/helper'
import { isPlainObject } from '@vuepress/helper'
import type { PlumeThemeOptions, PlumeThemePageData } from '../shared/index.js'
import { mergeLocaleOptions } from './defaultOptions.js'
import { setupPlugins } from './plugins.js'
@ -59,12 +59,6 @@ export function plumeTheme({
.replace(/\n/g, '')
return templateRenderer(template, context)
},
extendsBundlerOptions: (options, app) => {
addViteConfig(options, app, {
server: { fs: { cachedChecks: false } },
})
},
}
}
}

View File

@ -31,7 +31,7 @@ export interface PlumeThemePluginOptions {
* @deprecated move to `shiki`
*
*/
shikiji?: false | ShikiPluginOptions
shikiji?: never
/**
*