diff --git a/docs/notes/theme/config/plugins/代码高亮.md b/docs/notes/theme/config/plugins/代码高亮.md index 3a0e22d3..f46e0241 100644 --- a/docs/notes/theme/config/plugins/代码高亮.md +++ b/docs/notes/theme/config/plugins/代码高亮.md @@ -20,12 +20,13 @@ Shiki 支持多种编程语言。 [@vuepress/plugin-shiki](https://ecosystem.vuejs.press/zh/plugins/shiki.html) 两个代码高亮插件, 提供了更为丰富的功能支持,包括: -- [代码行高亮](/guide/markdown/extensions/#在代码块中实现行高亮) -- [代码聚焦](/guide/markdown/extensions/#代码块中聚焦) -- [代码对比差异](/guide/markdown/extensions/#代码块中的颜色差异) -- [代码高亮“错误”和“警告”](/guide/markdown/extensions/#高亮-错误-和-警告) -- [代码词高亮](/guide/markdown/extensions/#代码块中-词高亮) -- [twoslash](/guide/markdown/experiment/#twoslash) ,在代码块内提供内联类型提示。 +- [代码行高亮](../../guide/代码/特性支持.md#在代码块中实现行高亮) +- [代码聚焦](../../guide/代码/特性支持.md#代码块中聚焦) +- [代码对比差异](../../guide/代码/特性支持.md#代码块中的颜色差异) +- [代码高亮“错误”和“警告”](../../guide/代码/特性支持.md#高亮-错误-和-警告) +- [代码词高亮](../../guide/代码/特性支持.md#代码块中-词高亮) +- [代码块折叠](../../guide/代码/特性支持.md#折叠代码块) +- [twoslash](../../guide/代码/twoslash.md#twoslash) ,在代码块内提供内联类型提示。 默认配置: @@ -140,16 +141,18 @@ interface CopyCodeOptions { ### whitespace -- 类型: `boolean` +- 类型: `boolean | 'all' | 'boundary' | 'trailing'` - 默认值: `false` 将空白字符(Tab 和空格)渲染为单独的标签(具有 tab 或 space 类名)。 效果: -```ts whitespace -function block() { - space() - table() -} -``` + + +### collapseLines + +- 类型: `boolean | number` +- 默认值: `false` + +将代码块折叠到指定行数。 diff --git a/docs/notes/theme/guide/代码/特性支持.md b/docs/notes/theme/guide/代码/特性支持.md index f174f8fe..ea7ab42a 100644 --- a/docs/notes/theme/guide/代码/特性支持.md +++ b/docs/notes/theme/guide/代码/特性支持.md @@ -309,6 +309,8 @@ console.log(options.foo) // 这个不会被高亮显示 将空白字符(Tab 和空格)渲染为可见状态。 +在 代码块 后面添加 `:whitespace`。 + 还可以在 `theme.plugins.shiki` 中全局启用 `whitespace` 功能: @@ -327,3 +329,158 @@ export default defineUserConfig({ ``` ::: + +全局启用时,可以使用 `:no-whitespace` 来单独为某一代码块禁用 `whitespace` 功能。 + +## 折叠代码块 + +有时候,代码块会很长,对于阅读其它部分的内容时,会显得很麻烦,影响阅读体验,这时候可以折叠代码块。 + +在 代码块 后面添加 `:collapsed-lines`,即可折叠代码块,默认从第 15 行开始折叠。 + +**输入:** + +````txt +```css :collapsed-lines +html { + margin: 0; + background: black; + height: 100%; +} + +... more code +``` +```` + +**输出:** + +```css :collapsed-lines +html { + margin: 0; + background: black; + height: 100%; +} + +body { + margin: 0; + width: 100%; + height: inherit; +} + +/* the three main rows going down the page */ + +body > div { + height: 25%; +} + +.thumb { + float: left; + width: 25%; + height: 100%; + object-fit: cover; +} + +.main { + display: none; +} + +.blowup { + display: block; + position: absolute; + object-fit: contain; + object-position: center; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 2000; +} + +.darken { + opacity: 0.4; +} +``` + +还可以指定起始折叠行。`:collapsed-lines=10` 表示从第十行开始折叠。 + +**输入:** + +````txt +```css :collapsed-lines=10 +html { + margin: 0; + background: black; + height: 100%; +} + +... more code +``` +```` + +**输出:** + +```css :collapsed-lines=10 +html { + margin: 0; + background: black; + height: 100%; +} + +body { + margin: 0; + width: 100%; + height: inherit; +} + +/* the three main rows going down the page */ + +body > div { + height: 25%; +} + +.thumb { + float: left; + width: 25%; + height: 100%; + object-fit: cover; +} + +.main { + display: none; +} + +.blowup { + display: block; + position: absolute; + object-fit: contain; + object-position: center; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 2000; +} + +.darken { + opacity: 0.4; +} +``` + +还可以在 `theme.plugins.shiki` 中全局启用 `collapsed-lines` 功能: + +::: code-tabs +@tab .vuepress/config.ts + +```ts +export default defineUserConfig({ + theme: plumeTheme({ + plugins: { + shiki: { collapsedLines: true } + } + }) +}) +``` + +::: + +全局启用时,可以使用 `:no-collapsed-lines` 来单独为某一代码块禁用 `collapsed-lines` 功能。 diff --git a/docs/notes/theme/guide/编写文章.md b/docs/notes/theme/guide/编写文章.md index 12a9fc85..b33e6ce4 100644 --- a/docs/notes/theme/guide/编写文章.md +++ b/docs/notes/theme/guide/编写文章.md @@ -24,7 +24,7 @@ tags: - 文件夹的名称将作为 `category` 即 __分类__。 - 允许多级目录,子级目录将作为父目录对应的分类的子项。 -- 如果目录名称 在 [主题配置 notes](/vuepress-theme-plume/theme-config/#notes) 中声明用于 notes 文章管理,则默认不作为 分类目录。 +- 如果目录名称 在 [主题配置 notes](../config/notes配置.md) 中声明用于 notes 文章管理,则默认不作为 分类目录。 ### 文件夹命名约定 @@ -53,4 +53,4 @@ __example:__ ## 文章写作 你可以使用 `markdown` 语法开始在 `sourceDir` 下新建 `Markdown` 文件,编写你自己的文章了, -关于 markdown 扩展的功能支持,请查看 [这个文档](/guide/markdown/extensions/)。 +关于 markdown 扩展的功能支持,请查看 [这个文档](./markdown/扩展.md) diff --git a/docs/notes/theme/snippet/whitespace.snippet.md b/docs/notes/theme/snippet/whitespace.snippet.md index 1b9c945b..c7cdbcb2 100644 --- a/docs/notes/theme/snippet/whitespace.snippet.md +++ b/docs/notes/theme/snippet/whitespace.snippet.md @@ -3,7 +3,7 @@ **输入:** ```` -```xml whitespace +```xml :whitespace Everyday Italian @@ -15,7 +15,7 @@ **输出:** -```xml whitespace +```xml :whitespace :no-line-numbers Everyday Italian @@ -28,7 +28,7 @@ **输入:** ```` -```xml whitespace +```xml :whitespace Everyday Italian @@ -39,10 +39,31 @@ **输出:** -```xml whitespace +```xml :whitespace :no-line-numbers Everyday Italian ``` + +渲染所有的空格: + +**输入:** + +```` +```js :whitespace=all +function foo( ) { + return 'Hello World' +} +``` +``` +```` + +**输出:** + +```js :whitespace=all :no-line-numbers +function foo( ) { + return 'Hello World' +} +```