diff --git a/docs/.vuepress/notes.ts b/docs/.vuepress/notes.ts index 456e6bc4..d1e0f6fe 100644 --- a/docs/.vuepress/notes.ts +++ b/docs/.vuepress/notes.ts @@ -97,7 +97,7 @@ export const zhNotes = definePlumeNotesConfig({ text: '内置插件', dir: 'plugins', collapsed: false, - items: ['', '代码复制', '代码高亮', '搜索', '阅读统计', 'markdown增强', 'markdownPower', '百度统计'], + items: ['', '代码高亮', '搜索', '阅读统计', 'markdown增强', 'markdownPower', '百度统计'], }, ], }, diff --git a/docs/demos.md b/docs/demos.md index 26c5e4d8..2757f529 100644 --- a/docs/demos.md +++ b/docs/demos.md @@ -7,6 +7,7 @@ readingTime: false prev: false next: false article: false +externalLink: false docs: - name: VuePress Plume diff --git a/docs/notes/theme/config/plugins/代码高亮.md b/docs/notes/theme/config/plugins/代码高亮.md index e4b3a445..e16cc4fe 100644 --- a/docs/notes/theme/config/plugins/代码高亮.md +++ b/docs/notes/theme/config/plugins/代码高亮.md @@ -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[]` diff --git a/docs/notes/theme/guide/代码/特性支持.md b/docs/notes/theme/guide/代码/特性支持.md index c00f3c20..3ba73064 100644 --- a/docs/notes/theme/guide/代码/特性支持.md +++ b/docs/notes/theme/guide/代码/特性支持.md @@ -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` 表示要高亮的行号。 diff --git a/plugins/plugin-shikiji/src/node/highlight.ts b/plugins/plugin-shikiji/src/node/highlight.ts index 5a42d93b..c4979af0 100644 --- a/plugins/plugin-shikiji/src/node/highlight.ts +++ b/plugins/plugin-shikiji/src/node/highlight.ts @@ -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) diff --git a/theme/src/node/plugins.ts b/theme/src/node/plugins.ts index d4c79aef..0ff4046a 100644 --- a/theme/src/node/plugins.ts +++ b/theme/src/node/plugins.ts @@ -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 diff --git a/theme/src/node/theme.ts b/theme/src/node/theme.ts index 93c16525..628d0874 100644 --- a/theme/src/node/theme.ts +++ b/theme/src/node/theme.ts @@ -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 } }, - }) - }, } } } diff --git a/theme/src/shared/options/plugins.ts b/theme/src/shared/options/plugins.ts index 40807dba..d52e5ab9 100644 --- a/theme/src/shared/options/plugins.ts +++ b/theme/src/shared/options/plugins.ts @@ -31,7 +31,7 @@ export interface PlumeThemePluginOptions { * @deprecated move to `shiki` * 代码高亮 配置 */ - shikiji?: false | ShikiPluginOptions + shikiji?: never /** * 代码高亮 配置