Skip to content

Commit 5cfa771

Browse files
committed
feat: update markdown code description
1 parent 04f3777 commit 5cfa771

File tree

6 files changed

+73
-183
lines changed

6 files changed

+73
-183
lines changed

docs/guide/markdown.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ Following code blocks extensions are implemented during markdown parsing in Node
158158

159159
#### Code Title
160160

161-
You can specify the title of the code block by adding a `title` key-value mark in your fenced code blocks.
161+
You can specify the title of the code block by adding a `title` key-value mark in your fenced code blocks. Note: This requires theme support.
162162

163163
**Input**
164164

@@ -196,7 +196,7 @@ It can be used in combination with the other marks below. Please leave a space b
196196

197197
#### Line Highlighting
198198

199-
You can highlight specified lines of your code blocks by adding line ranges mark in your fenced code blocks:
199+
You can highlight specified lines of your code blocks by adding line ranges mark in your fenced code blocks. Note: This requires highlighter plugin and theme support.
200200

201201
**Input**
202202

@@ -244,9 +244,9 @@ Config reference: [markdown.code.highlightLines](../reference/config.md#markdown
244244

245245
#### Line Numbers
246246

247-
You must have noticed that the number of lines is displayed on the left side of code blocks. This is enabled by default and you can disable it in config.
247+
You must have noticed that the number of lines is displayed on the left side of code blocks.
248248

249-
You can add `:line-numbers` / `:no-line-numbers` mark in your fenced code blocks to override the value set in config.
249+
You can add `:line-numbers` / `:no-line-numbers` mark in your fenced code blocks to override the value set in config. Note: This requires highlighter plugin and theme support.
250250

251251
**Input**
252252

@@ -346,7 +346,7 @@ const onePlusTwoPlusThree = {{ 1 + 2 + 3 }}
346346
::: tip
347347
This v-pre extension is supported by our built-in plugin.
348348

349-
Config reference: [markdown.code.vPre.block](../reference/config.md#markdown-code-vpre-block)
349+
Config reference: [markdown.vPre.block](../reference/config.md#markdown-vpre-block)
350350
:::
351351

352352
### Import Code Blocks

docs/guide/migration.md

+6-3
Original file line numberDiff line numberDiff line change
@@ -145,9 +145,9 @@ Renamed to `pagePatterns`
145145

146146
#### markdown.lineNumbers
147147

148-
Moved to [markdown.code.lineNumbers](../reference/config.md#markdown-code-linenumbers).
148+
Removed.
149149

150-
Default value is changed from `false` to `true`.
150+
The same feature is implemented in [@vuepress/plugin-prismjs][prismjs] and [@vuepress/plugin-shiki][shiki].
151151

152152
#### markdown.pageSuffix
153153

@@ -414,7 +414,7 @@ Some major breaking changes:
414414
- Always provide a valid js entry file, and do not use `"main": "layouts/Layout.vue"` as the theme entry anymore.
415415
- `themeConfig` is removed from user config and site data. To access the `themeConfig` as you would via `this.$site.themeConfig` in v1, we now recommend using the [@vuepress/plugin-theme-data](https://ecosystem.vuejs.press/plugins/theme-data.html) plugin and its `useThemeData` composition API.
416416
- Stylus is no longer the default CSS pre-processor, and the stylus palette system is not embedded. If you still want to use similar palette system as v1, [@vuepress/plugin-palette](https://ecosystem.vuejs.press/plugins/palette.html) may help.
417-
- Markdown code blocks syntax highlighting by Prism.js is not embedded by default. You can use either [@vuepress/plugin-prismjs](https://ecosystem.vuejs.press/plugins/prismjs.html) or [@vuepress/plugin-shiki](https://ecosystem.vuejs.press/plugins/shiki.html), or implement syntax highlighting in your own way.
417+
- Markdown code blocks syntax highlighting by Prism.js is not embedded by default. You can use either [@vuepress/plugin-prismjs][prismjs] or [@vuepress/plugin-shiki][shiki], or implement syntax highlighting in your own way.
418418
- For scalability concerns, `this.$site.pages` is not available any more. See [Advanced > Cookbook > Resolving Routes](../advanced/cookbook/resolving-routes.md) for how to retrieve pages data in v2.
419419

420420
For more detailed guide about how to write a theme in v2, see [Advanced > Writing a Theme](../advanced/theme.md).
@@ -438,3 +438,6 @@ You can still inherit a parent theme with `extends: parentTheme()`, which will e
438438
You can refer to [Default Theme > Extending](https://ecosystem.vuejs.press/themes/default/extending.html) for how to extend default theme.
439439

440440
The `@theme` and `@parent-theme` aliases are removed by default, but you can still make a extendable theme with similar approach, see [Advanced > Cookbook > Making a Theme Extendable](../advanced/cookbook/making-a-theme-extendable.md).
441+
442+
[prismjs]: https://ecosystem.vuejs.press/plugins/prismjs.html
443+
[shiki]: https://ecosystem.vuejs.press/plugins/shiki.html

docs/reference/config.md

+26-84
Original file line numberDiff line numberDiff line change
@@ -400,90 +400,6 @@ const defaultOptions = {
400400
You should not configure it unless you understand what it is for.
401401
:::
402402

403-
### markdown.code
404-
405-
- Type: `CodePluginOptions | false`
406-
407-
- Details:
408-
409-
Options for VuePress built-in markdown-it code plugin.
410-
411-
Set to `false` to disable this plugin.
412-
413-
- Also see:
414-
- [Guide > Markdown > Syntax Extensions > Code Blocks](../guide/markdown.md#code-blocks)
415-
416-
#### markdown.code.highlightLines
417-
418-
- Type: `boolean`
419-
420-
- Default: `true`
421-
422-
- Details:
423-
424-
Enable code line highlighting or not.
425-
426-
- Also see:
427-
- [Guide > Markdown > Syntax Extensions > Code Blocks > Line Highlighting](../guide/markdown.md#line-highlighting)
428-
429-
#### markdown.code.lineNumbers
430-
431-
- Type: `boolean | number`
432-
433-
- Default: `true`
434-
435-
- Details:
436-
437-
Configure code line numbers.
438-
439-
- A `boolean` value is to enable line numbers or not.
440-
- A `number` value is the minimum number of lines to enable line numbers. For example, if you set it to `4`, line numbers will only be enabled when your code block has at least 4 lines of code.
441-
442-
- Also see:
443-
- [Guide > Markdown > Syntax Extensions > Code Blocks > Line Numbers](../guide/markdown.md#line-numbers)
444-
445-
#### markdown.code.preWrapper
446-
447-
- Type: `boolean`
448-
449-
- Default: `true`
450-
451-
- Details:
452-
453-
Enable the extra wrapper of the `<pre>` tag or not.
454-
455-
The wrapper is required by the `highlightLines` and `lineNumbers`. That means, if you disable `preWrapper`, the line highlighting and line numbers will also be disabled.
456-
457-
::: tip
458-
You can disable it if you want to implement them in client side. For example, [Prismjs Line Highlight](https://prismjs.com/plugins/line-highlight/) or [Prismjs Line Numbers](https://prismjs.com/plugins/line-numbers/).
459-
:::
460-
461-
#### markdown.code.vPre.block
462-
463-
- Type: `boolean`
464-
465-
- Default: `true`
466-
467-
- Details:
468-
469-
Add `v-pre` directive to `<pre>` tag of code block or not.
470-
471-
- Also see:
472-
- [Guide > Markdown > Syntax Extensions > Code Blocks > Wrap with v-pre](../guide/markdown.md#wrap-with-v-pre)
473-
474-
#### markdown.code.vPre.inline
475-
476-
- Type: `boolean`
477-
478-
- Default: `true`
479-
480-
- Details:
481-
482-
Add `v-pre` directive to `<code>` tag of inline code or not.
483-
484-
- Also see:
485-
- [Guide > Markdown > Syntax Extensions > Code Blocks > Wrap with v-pre](../guide/markdown.md#wrap-with-v-pre)
486-
487403
### markdown.component
488404

489405
- Type: `undefined | false`
@@ -671,6 +587,32 @@ const defaultOptions = {
671587
- Also see:
672588
- [Guide > Markdown > Syntax Extensions > Table of Contents](../guide/markdown.md#table-of-contents)
673589

590+
#### markdown.vPre.block
591+
592+
- Type: `boolean`
593+
594+
- Default: `true`
595+
596+
- Details:
597+
598+
Add `v-pre` directive to `<pre>` tag of code block or not.
599+
600+
- Also see:
601+
- [Guide > Markdown > Syntax Extensions > Code Blocks > Wrap with v-pre](../guide/markdown.md#wrap-with-v-pre)
602+
603+
#### markdown.vPre.inline
604+
605+
- Type: `boolean`
606+
607+
- Default: `true`
608+
609+
- Details:
610+
611+
Add `v-pre` directive to `<code>` tag of inline code or not.
612+
613+
- Also see:
614+
- [Guide > Markdown > Syntax Extensions > Code Blocks > Wrap with v-pre](../guide/markdown.md#wrap-with-v-pre)
615+
674616
## Plugin Config
675617

676618
### plugins

docs/zh/guide/markdown.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ Emoji 扩展由 [markdown-it-emoji](https://github.com/markdown-it/markdown-it-e
159159

160160
#### 代码标题
161161

162-
你可以在代码块添加一个 `title` 键值对来为代码块设置标题。
162+
你可以在代码块添加一个 `title` 键值对来为代码块设置标题。提示:需要主题支持。
163163

164164
**Input**
165165

@@ -197,7 +197,7 @@ export default defineUserConfig({
197197

198198
#### 行高亮
199199

200-
你可以在代码块添加行数范围标记,来为对应代码行进行高亮
200+
你可以在代码块添加行数范围标记,来为对应代码行进行高亮。提示:它需要高亮器插件和主题支持。
201201

202202
**输入**
203203

@@ -245,7 +245,7 @@ export default defineUserConfig({
245245

246246
#### 行号
247247

248-
你肯定已经注意到在代码块的最左侧会展示行号。这个功能是默认启用的,你可以通过配置来禁用它。
248+
你肯定已经注意到在代码块的最左侧会展示行号。这个功能是默认启用的,你可以通过配置来禁用它。提示:它需要高亮器插件和主题支持。
249249

250250
你可以在代码块添加 `:line-numbers` / `:no-line-numbers` 标记来覆盖配置项中的设置。
251251

@@ -347,7 +347,7 @@ const onePlusTwoPlusThree = {{ 1 + 2 + 3 }}
347347
::: tip
348348
v-pre 扩展是由我们的内置插件支持的。
349349

350-
配置参考: [markdown.code.vPre.block](../reference/config.md#markdown-code-vpre-block)
350+
配置参考: [markdown.vPre.block](../reference/config.md#markdown-vpre-block)
351351
:::
352352

353353
### 导入代码块

docs/zh/guide/migration.md

+6-3
Original file line numberDiff line numberDiff line change
@@ -145,9 +145,9 @@ npm i -D @vuepress/theme-default@next
145145

146146
#### markdown.lineNumbers
147147

148-
移动至 [markdown.code.lineNumbers](../reference/config.md#markdown-code-linenumbers)
148+
移除
149149

150-
默认值从 `false` 更改为 `true`
150+
相同的功能改在 [@vuepress/plugin-prismjs][prismjs][@vuepress/plugin-shiki][shiki] 提供
151151

152152
#### markdown.pageSuffix
153153

@@ -416,7 +416,7 @@ v1 的主题和插件和 v2 并不兼容。
416416
- 你始终需要提供一个合法的 JS 入口文件,不要再使用 `"main": "layouts/Layout.vue"` 作为主题入口。
417417
- `themeConfig` 已经从用户配置和站点数据中移除。如果你想要像 v1 一样通过 `this.$site.themeConfig` 来访问 `themeConfig` ,我们现在建议使用 [@vuepress/plugin-theme-data](https://ecosystem.vuejs.press/zh/plugins/theme-data.html) 插件和它提供的 Composition API `useThemeData`
418418
- Stylus 不再是默认的 CSS 预处理器,并且 Stylus 调色板系统不再被默认支持。如果你仍然想要使用和 v1 类似的调色板系统,可以使用 [@vuepress/plugin-palette](https://ecosystem.vuejs.press/zh/plugins/palette.html)
419-
- 由 Prism.js 提供的 Markdown 代码块的语法高亮不再被默认支持。你可以选择使用 [@vuepress/plugin-prismjs](https://ecosystem.vuejs.press/zh/plugins/prismjs.html)[@vuepress/plugin-shiki](https://ecosystem.vuejs.press/zh/plugins/plugin/shiki.html) ,或者用你自己的方式实现语法高亮。
419+
- 由 Prism.js 提供的 Markdown 代码块的语法高亮不再被默认支持。你可以选择使用 [@vuepress/plugin-prismjs][prismjs][@vuepress/plugin-shiki][shiki] ,或者用你自己的方式实现语法高亮。
420420
- 考虑到可扩展性, `this.$site.pages` 不再可用。查看 [深入 > Cookbook > 解析路由](../advanced/cookbook/resolving-routes.md) 了解如何在 v2 中获取页面的数据。
421421

422422
你可以参考 [深入 > 开发主题](../advanced/theme.md) 来了解如何开发一个 v2 主题。
@@ -440,3 +440,6 @@ v1 的主题和插件和 v2 并不兼容。
440440
你可以参考 [默认主题 > 继承](https://ecosystem.vuejs.press/zh/themes/default/extending.html) 来了解如何继承默认主题。
441441

442442
`@theme``@parent-theme` 别名默认被移除了,但你仍然可以使用类似的方式来开发一个可继承的主题,参考 [深入 > Cookbook > 开发一个可继承的主题](../advanced/cookbook/making-a-theme-extendable.md)
443+
444+
[prismjs]: https://ecosystem.vuejs.press/zh/plugins/prismjs.html
445+
[shiki]: https://ecosystem.vuejs.press/zh/plugins/shiki.html

docs/zh/reference/config.md

+26-84
Original file line numberDiff line numberDiff line change
@@ -399,90 +399,6 @@ const defaultOptions = {
399399
除非你了解它的用途,否则你不应该设置该配置项。
400400
:::
401401

402-
### markdown.code
403-
404-
- 类型: `CodePluginOptions | false`
405-
406-
- 详情:
407-
408-
VuePress 内置的 markdown-it code 插件的配置项。
409-
410-
设置为 `false` 可以禁用该插件。
411-
412-
- 参考:
413-
- [指南 > Markdown > 语法扩展 > 代码块](../guide/markdown.md#代码块)
414-
415-
#### markdown.code.highlightLines
416-
417-
- 类型: `boolean`
418-
419-
- 默认值: `true`
420-
421-
- 详情:
422-
423-
是否启用代码块行高亮。
424-
425-
- 参考:
426-
- [指南 > Markdown > 语法扩展 > 代码块 > 行高亮](../guide/markdown.md#行高亮)
427-
428-
#### markdown.code.lineNumbers
429-
430-
- 类型: `boolean | number`
431-
432-
- 默认值: `true`
433-
434-
- 详情:
435-
436-
配置代码块行号。
437-
438-
- 布尔值 `boolean` 代表是否启用代码块行号。
439-
- 数字 `number` 代表显示行号所需的最少行数。例如,如果你将它设置为 `4` ,那么只有在你的代码块包含至少 4 行代码时才会启用行号。
440-
441-
- 参考:
442-
- [指南 > Markdown > 语法扩展 > 代码块 > 行号](../guide/markdown.md#行号)
443-
444-
#### markdown.code.preWrapper
445-
446-
- 类型: `boolean`
447-
448-
- 默认值: `true`
449-
450-
- 详情:
451-
452-
是否在 `<pre>` 标签外额外包裹一层。
453-
454-
`highlightLines``lineNumbers` 依赖于这个额外的包裹层。这换句话说,如果你禁用了 `preWrapper` ,那么行高亮和行号也会被同时禁用。
455-
456-
::: tip
457-
如果你想要在客户端来实现这些功能时,可以禁用该配置项。比如使用 [Prismjs Line Highlight](https://prismjs.com/plugins/line-highlight/) 或者 [Prismjs Line Numbers](https://prismjs.com/plugins/line-numbers/)
458-
:::
459-
460-
#### markdown.code.vPre.block
461-
462-
- 类型: `boolean`
463-
464-
- 默认值: `true`
465-
466-
- 详情:
467-
468-
是否在代码块的 `<pre>` 标签上添加 `v-pre` 指令。
469-
470-
- 参考:
471-
- [指南 > Markdown > 语法扩展 > 代码块 > 添加 v-pre](../guide/markdown.md#添加-v-pre)
472-
473-
#### markdown.code.vPre.inline
474-
475-
- 类型: `boolean`
476-
477-
- 默认值: `true`
478-
479-
- 详情:
480-
481-
是否在行内代码的 `<code>` 标签上添加 `v-pre` 指令。
482-
483-
- 参考:
484-
- [指南 > Markdown > 语法扩展 > 代码块 > 添加 v-pre](../guide/markdown.md#添加-v-pre)
485-
486402
### markdown.component
487403

488404
- 类型: `undefined | false`
@@ -670,6 +586,32 @@ const defaultOptions = {
670586
- 参考:
671587
- [指南 > Markdown > 语法扩展 > 目录](../guide/markdown.md#目录)
672588

589+
#### markdown.vPre.block
590+
591+
- 类型: `boolean`
592+
593+
- 默认值: `true`
594+
595+
- 详情:
596+
597+
是否在代码块的 `<pre>` 标签上添加 `v-pre` 指令。
598+
599+
- 参考:
600+
- [指南 > Markdown > 语法扩展 > 代码块 > 添加 v-pre](../guide/markdown.md#添加-v-pre)
601+
602+
#### markdown.vPre.inline
603+
604+
- 类型: `boolean`
605+
606+
- 默认值: `true`
607+
608+
- 详情:
609+
610+
是否在行内代码的 `<code>` 标签上添加 `v-pre` 指令。
611+
612+
- 参考:
613+
- [指南 > Markdown > 语法扩展 > 代码块 > 添加 v-pre](../guide/markdown.md#添加-v-pre)
614+
673615
## 插件配置
674616

675617
### plugins

0 commit comments

Comments
 (0)