docs: update doc
This commit is contained in:
pengzhanbo
parent
20d06c0de8
commit
4349ab023c
@ -21,5 +21,8 @@
|
||||
},
|
||||
"fenced-code-language": false,
|
||||
"code-block-style": false,
|
||||
"emphasis-style": false
|
||||
"emphasis-style": false,
|
||||
"no-hard-tabs": {
|
||||
"spaces_per_tab": 2
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,20 +12,24 @@ export const zhNotes = definePlumeNotesConfig({
|
||||
text: '快速开始',
|
||||
collapsed: false,
|
||||
icon: 'carbon:idea',
|
||||
items: ['介绍', '安装与使用', '博客', '知识笔记', '部署'],
|
||||
items: ['介绍', '安装与使用', '博客', '知识笔记', '编写文章', '国际化', '部署'],
|
||||
},
|
||||
{
|
||||
text: '写作',
|
||||
icon: 'fluent-mdl2:edit-create',
|
||||
collapsed: false,
|
||||
items: [
|
||||
'编写文章',
|
||||
'国际化',
|
||||
{
|
||||
text: 'markdown',
|
||||
icon: 'material-symbols:markdown-outline',
|
||||
dir: 'markdown',
|
||||
items: ['基础', '扩展', '进阶', '试验性'],
|
||||
items: ['基础', '扩展', '进阶'],
|
||||
},
|
||||
{
|
||||
text: '代码块',
|
||||
dir: '代码',
|
||||
icon: 'ph:code-bold',
|
||||
items: ['介绍', '特性支持', '代码组', '导入代码', 'codepen', 'jsFiddle', 'codeSandbox', 'replit', 'twoslash', '代码演示'],
|
||||
},
|
||||
{
|
||||
text: '图表',
|
||||
@ -87,7 +91,7 @@ export const zhNotes = definePlumeNotesConfig({
|
||||
text: '内置插件',
|
||||
dir: 'plugins',
|
||||
collapsed: false,
|
||||
items: ['', '代码复制', '代码高亮', '搜索', '阅读统计', 'markdown增强', '百度统计'],
|
||||
items: ['', '代码复制', '代码高亮', '搜索', '阅读统计', 'markdown增强', 'markdownPower', '百度统计'],
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -102,6 +106,7 @@ export const zhNotes = definePlumeNotesConfig({
|
||||
'caniuse',
|
||||
'iconify',
|
||||
'shiki',
|
||||
'md-power',
|
||||
'content-updated',
|
||||
{
|
||||
text: 'plugin-netlify-functions',
|
||||
|
||||
@ -78,7 +78,7 @@ config:
|
||||
description: 支持全站加密、部分加密（加密目录、加密文章）。
|
||||
-
|
||||
title: 代码
|
||||
description: 代码复制，CodePen演示，Replit演示
|
||||
description: 代码复制，CodePen演示，Replit演示，JSFiddle演示，CodeSandbox演示，\n代码组，行高亮，行聚焦，行警告，差异对比等。\n
|
||||
-
|
||||
title: 资源嵌入
|
||||
description: 图表，视频，PDF
|
||||
|
||||
@ -14,4 +14,6 @@ permalink: /plugins/
|
||||
- [@vuepress-plume/plugin-caniuse](/plugins/plugin-caniuse/)
|
||||
- [@vuepress-plume/plugin-iconify](/plugins/plugin-iconify/)
|
||||
- [@vuepress-plume/plugin-shikiji](/plugins/plugin-shikiji/)
|
||||
- [@vuepress-plume/plugin-content-update](/plugins/plugin-content-update/)
|
||||
- [vuepress-plugin-netlify-functions](/plugins/plugin-netlify-functions/)
|
||||
- [vuepress-plugin-md-power](/plugins/plugin-md-power/)
|
||||
|
||||
282
docs/notes/plugins/md-power.md
Normal file
282
docs/notes/plugins/md-power.md
Normal file
@ -0,0 +1,282 @@
|
||||
---
|
||||
title: plugin-md-power
|
||||
author: pengzhanbo
|
||||
createTime: 2024/04/04 18:44:57
|
||||
permalink: /plugins/plugin-md-power/
|
||||
---
|
||||
|
||||
## 指南
|
||||
|
||||
插件为 vuepress markdown 注入更多的功能支持。
|
||||
|
||||
其中，`@[xxx](xx)` 形式的语法，主要用于 资源嵌入类型的支持，包括 嵌入 PDF、视频、代码演示等。
|
||||
|
||||
同时，还提供了其它的语法支持。
|
||||
|
||||
## 安装
|
||||
|
||||
::: code-tabs
|
||||
@tab npm
|
||||
|
||||
``` sh
|
||||
npm install vuepress-plugin-md-power
|
||||
```
|
||||
|
||||
@tab:active yarn
|
||||
|
||||
``` sh
|
||||
yarn add vuepress-plugin-md-power
|
||||
```
|
||||
|
||||
@tab pnpm
|
||||
|
||||
``` sh
|
||||
pnpm add vuepress-plugin-md-power
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 使用
|
||||
|
||||
```ts
|
||||
// .vuepress/config.ts
|
||||
import { markdownPowerPlugin } from 'vuepress-plugin-md-power'
|
||||
module.exports = {
|
||||
// ...
|
||||
plugins: [
|
||||
markdownPowerPlugin({
|
||||
pdf: true
|
||||
})
|
||||
]
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
```ts
|
||||
interface MarkdownPowerPluginOptions {
|
||||
pdf?: boolean | PDFOptions
|
||||
|
||||
// new syntax
|
||||
icons?: boolean | IconsOptions
|
||||
|
||||
// video embed
|
||||
bilibili?: boolean
|
||||
youtube?: boolean
|
||||
|
||||
// code embed
|
||||
codepen?: boolean
|
||||
replit?: boolean
|
||||
codeSandbox?: boolean
|
||||
jsfiddle?: boolean
|
||||
|
||||
caniuse?: boolean | CanIUseOptions
|
||||
}
|
||||
```
|
||||
|
||||
## 使用
|
||||
|
||||
### caniuse
|
||||
|
||||
插件默认不启用该功能，你需要手动设置 `caniuse` 为 `true`
|
||||
|
||||
#### 语法
|
||||
|
||||
```md
|
||||
@[caniuse](feature)
|
||||
@[caniuse image](feature)
|
||||
@[caniuse embed{versions}](feature)
|
||||
```
|
||||
|
||||
你可以从 [caniuse](https://caniuse.bitsofco.de/) 获取 feature 的值。
|
||||
|
||||
默认情况下，插件通过 `iframe` 嵌入 `caniuse` 的支持情况查看器。
|
||||
你也可以使用 `@[caniuse image](feature)` 直接嵌入图片。
|
||||
|
||||
caniuse 默认查看最近的5个浏览器版本。你可以通过 `{versions}` 手动设置查看的浏览器版本。
|
||||
格式为 `{number,number,...}`。取值范围为 `-5 ~ 3` 。
|
||||
|
||||
- 小于0 表示低于当前浏览器版本的支持情况
|
||||
- 0 表示当前浏览器版本的支持情况
|
||||
- 大于0 表示高于当前浏览器版本的支持情况
|
||||
|
||||
如 `{-2,-1,1,2}` 表示查看低于当前 2 个版本 到 高于当前 2 个版本的支持情况。
|
||||
|
||||
### pdf
|
||||
|
||||
插件默认不启用该功能，你需要手动设置 `pdf` 为 `true`
|
||||
|
||||
#### 语法
|
||||
|
||||
```md
|
||||
@[pdf](url)
|
||||
@[pdf 1](url)
|
||||
@[pdf 1 no-toolbar width="100%" height="600px" zoom="1" ratio="16:9"](url)
|
||||
```
|
||||
|
||||
`url` 只支持绝对路径以及完整的资源链接地址，请勿传入相对路径。
|
||||
|
||||
你可以在 `pdf` 后紧跟空格，设置一个数字表示默认显示的 pdf 页码
|
||||
|
||||
- `no-toolbar` 表示不显示工具栏
|
||||
- `width` 设置宽度
|
||||
- `height` 设置高度
|
||||
- `zoom` 设置缩放
|
||||
- `ratio` 设置宽高比， 仅当 `width` 有值， `height` 未设置时有效
|
||||
|
||||
### icons
|
||||
|
||||
插件默认不启用该功能，你需要手动设置 `icons` 为 `true`。
|
||||
|
||||
你还需要手动安装 `@iconify/json` 依赖。
|
||||
|
||||
```sh
|
||||
pnpm add @iconify/json
|
||||
```
|
||||
|
||||
#### 语法
|
||||
|
||||
```md
|
||||
:[collect:icon]:
|
||||
:[collect:icon size]:
|
||||
:[collect:icon /color]:
|
||||
:[collect:icon size/color]:
|
||||
```
|
||||
|
||||
你可以从 [icon-sets.iconify](https://icon-sets.iconify.design/) 获取 图标集。
|
||||
|
||||
显示 `logos` 图标集合下的 `vue` 图标
|
||||
|
||||
```md
|
||||
:[logos:vue]:
|
||||
```
|
||||
|
||||
图标默认大小为 `1em` ，你可以通过 `size` 设置图标大小
|
||||
|
||||
```md
|
||||
:[logos:vue 1.2em]:
|
||||
```
|
||||
|
||||
图标默认颜色为 `currentColor` 你可以通过 `/color` 设置图标颜色
|
||||
|
||||
```md
|
||||
:[logos:vue /blue]:
|
||||
```
|
||||
|
||||
也可以通过 `size/color` 设置图标大小和颜色
|
||||
|
||||
```md
|
||||
:[logos:vue 1.2em/blue]:
|
||||
```
|
||||
|
||||
### bilibili
|
||||
|
||||
插件默认不启用该功能，你需要手动设置 `bilibili` 为 `true`
|
||||
|
||||
#### 语法
|
||||
|
||||
```md
|
||||
@[bilibili](bvid)
|
||||
@[bilibili autoplay time="0"](bvid)
|
||||
@[bilibili p1 autoplay time="0" ratio="16:9"](aid cid)
|
||||
```
|
||||
|
||||
- 设置 `autoplay` 以自动播放视频。
|
||||
- 设置 `time` 以指定开始播放的时间点，单位为秒。还可以传入 `mm:ss` 或者 `hh:mm:ss`。
|
||||
- 如果为 分p（非合集），还可以设置 `p\d` （第\d 个分p），此时可以只传入 `aid` 和 `cid`。
|
||||
- 设置 `ratio` 以指定视频的宽高比。
|
||||
|
||||
### youtube
|
||||
|
||||
插件默认不启用该功能，你需要手动设置 `youtube` 为 `true`
|
||||
|
||||
#### 语法
|
||||
|
||||
```md
|
||||
@[youtube](id)
|
||||
@[youtube autoplay loop ratio="16:9" star="0" end="0"](id)
|
||||
```
|
||||
|
||||
- `id` 为 YouTube 视频 ID
|
||||
- `autoplay` 为是否自动播放
|
||||
- `loop` 为是否循环播放
|
||||
- `ratio` 为视频的宽高比
|
||||
- `star` 为开始时间，单位为秒，还可以传入 `mm:ss` 或者 `hh:mm:ss`。
|
||||
- `end` 为结束时间，单位为秒，还可以传入 `mm:ss` 或者 `hh:mm:ss`。
|
||||
|
||||
### CodePen
|
||||
|
||||
插件默认不启用该功能，你需要手动设置 `codepen` 为 `true`
|
||||
|
||||
#### 语法
|
||||
|
||||
```md
|
||||
@[codepen](user/slash)
|
||||
@[codepen preview editable title="" height="400px" tab="css,result" theme="dark"](user/slash)
|
||||
```
|
||||
|
||||
- `user` 为 CodePen 用户名
|
||||
- `slash` 为 CodePen slash
|
||||
- `preview` 为是否为预览模式
|
||||
- `editable` 为是否为可编辑模式
|
||||
- `title` 为标题
|
||||
- `height` 为高度
|
||||
- `tab` 为选项卡，默认为 `result`, 多个以逗号分隔，如 `css,result`
|
||||
- `theme` 为主题， 可选值包括 `dark` 和 `light`
|
||||
|
||||
### Replit
|
||||
|
||||
插件默认不启用该功能，你需要手动设置 `replit` 为 `true`
|
||||
|
||||
#### 语法
|
||||
|
||||
```md
|
||||
@[replit](user/repl-name)
|
||||
@[replit title="" height="450px" theme="dark"](user/repl-name#filepath)
|
||||
```
|
||||
|
||||
- `user` 为 Replit 用户名
|
||||
- `repl-name` 为 Replit Repl 名
|
||||
- `filepath` 为文件路径
|
||||
- `title` 为标题
|
||||
- `height` 为高度
|
||||
- `theme` 为主题， 可选值包括 `dark` 和 `light`
|
||||
|
||||
### CodeSandbox
|
||||
|
||||
插件默认不启用该功能，你需要手动设置 `codesandbox` 为 `true`
|
||||
|
||||
#### 语法
|
||||
|
||||
```md
|
||||
@[codesandbox](id)
|
||||
@[codesandbox button](workspace/id)
|
||||
@[codesanbox title="xxx" layout="Editor+Preview" height="500px" navbar="false" console](id#filepath)
|
||||
```
|
||||
|
||||
- `id`: Code Sandbox ID
|
||||
- `title`: Code Sandbox 标题
|
||||
- `layout`: 代码预览布局 可选值： `Preview`， `Editor`， `Editor+Preview`
|
||||
- `height`: 代码预览高度
|
||||
- `navbar`: 是否显示导航栏，默认为 true
|
||||
- `console`: 是否显示控制台，默认为 false
|
||||
- `filepath`: 文件路径
|
||||
|
||||
### JSFiddle
|
||||
|
||||
插件默认不启用该功能，你需要手动设置 `jsfiddle` 为 `true`
|
||||
|
||||
#### 语法
|
||||
|
||||
```md
|
||||
@[jsfiddle](user/id)
|
||||
@[jsfiddle theme="dark" tab="js,css,html,result" height="500px"](user/id)
|
||||
```
|
||||
|
||||
- `user`: 用户
|
||||
- `id`: jsfiddle id
|
||||
- `theme`: 主题模式， 可选值： `"light" | "dark"`
|
||||
- `tab`: 选项卡， 可选值：`"js" | "css" | "html" | "result"`, 多个用 `","` 分割，
|
||||
顺序将决定选项卡的排序，默认为 `js,css,html,result`
|
||||
- `height`: 高度
|
||||
42
docs/notes/theme/config/plugins/markdownPower.md
Normal file
42
docs/notes/theme/config/plugins/markdownPower.md
Normal file
@ -0,0 +1,42 @@
|
||||
---
|
||||
title: Markdown Power
|
||||
author: pengzhanbo
|
||||
createTime: 2024/04/04 06:56:33
|
||||
permalink: /config/plugin/markdown-power/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
提供 Markdown 增强功能。
|
||||
|
||||
关联插件: [@vuepress-plume/plugin-md-power](/)
|
||||
|
||||
默认配置：
|
||||
|
||||
```ts
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownPower: {
|
||||
// 默认不启用任何功能，你需要手动开启它们
|
||||
// pdf: true, // @[pdf](url) 嵌入 PDF 文件
|
||||
// icons: true, // :[collect:name]: 内联 iconify 图标
|
||||
// bilibili: true, // @[bilibili](bvid) 嵌入 bilibili 视频
|
||||
// youtube: true, // @[youtube](id) 嵌入 youtube 视频
|
||||
// codepen: true, // @[codepen](user/slash) 嵌入 codepen
|
||||
// replit: true, // @[replit](user/repl-name) 嵌入 Replit
|
||||
// codeSandbox: true, // @[codesandbox](id) 嵌入 CodeSandbox
|
||||
// jsfiddle: true, // @[jsfiddle](id) 嵌入 jsfiddle
|
||||
// caniuse: true, // @[caniuse](feature) 嵌入 caniuse
|
||||
}
|
||||
}
|
||||
}),
|
||||
})
|
||||
```
|
||||
|
||||
## 配置
|
||||
|
||||
查看 [文档](/plugins/plugin-md-power/)
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: markdown增强
|
||||
title: Markdown Enhance
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/06 20:25:36
|
||||
permalink: /config/plugins/markdown-enhance/
|
||||
|
||||
@ -222,383 +222,6 @@ console.log('Hello, VitePress!')
|
||||
> [!CAUTION]
|
||||
> 行为可能带来的负面影响。
|
||||
|
||||
## 代码块中的语法高亮
|
||||
|
||||
主题 使用 [Shiki](https://github.com/shikijs/shiki) 在 Markdown 代码块中使用彩色文本实现语法高亮。
|
||||
Shiki 支持多种编程语言。需要做的就是将有效的语言别名附加到代码块的开头：
|
||||
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
name: 'MyComponent',
|
||||
// ...
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
````
|
||||
```html
|
||||
<ul>
|
||||
<li v-for="todo in todos" :key="todo.id">
|
||||
{{ todo.text }}
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
```js
|
||||
export default {
|
||||
name: 'MyComponent',
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li v-for="todo in todos" :key="todo.id">
|
||||
{{ todo.text }}
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
在 Shiki 的代码仓库中，可以找到 [合法的编程语言列表](https://shiki.style/languages)。
|
||||
|
||||
## 在代码块中实现行高亮
|
||||
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js{4}
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Highlighted!'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
```js{4}
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Highlighted!'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
除了单行之外，还可以指定多个单行、多行，或两者均指定：
|
||||
|
||||
- 多行：例如 `{5-8}`、`{3-10}`、`{10-17}`
|
||||
- 多个单行：例如 `{4,7,9}`
|
||||
- 多行与单行：例如 `{4,7-13,16,23-27,40}`
|
||||
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js{1,4,6-8}
|
||||
export default { // Highlighted
|
||||
data () {
|
||||
return {
|
||||
msg: `Highlighted!
|
||||
This line isn't highlighted,
|
||||
but this and the next 2 are.`,
|
||||
motd: 'VitePress is awesome',
|
||||
lorem: 'ipsum'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
```js{1,4,6-8}
|
||||
export default { // Highlighted
|
||||
data () {
|
||||
return {
|
||||
msg: `Highlighted!
|
||||
This line isn't highlighted,
|
||||
but this and the next 2 are.`,
|
||||
motd: 'VitePress is awesome',
|
||||
lorem: 'ipsum'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
也可以使用 `// [!code highlight]` 注释实现行高亮。
|
||||
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Highlighted!' // [\!code highlight]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Highlighted!' // [!code highlight]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 代码块中聚焦
|
||||
|
||||
在某一行上添加 `// [!code focus]` 注释将聚焦它并模糊代码的其他部分。
|
||||
|
||||
此外，可以使用 `// [!code focus:<lines>]` 定义要聚焦的行数。
|
||||
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Focused!' // [\!code focus]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Focused!' // [!code focus]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 代码块中的颜色差异
|
||||
|
||||
在某一行添加 `// [!code --]` 或 `// [!code ++]` 注释将会为该行创建 diff，同时保留代码块的颜色。
|
||||
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Removed', // [\!code --]
|
||||
msg: 'Added' // [\!code ++]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Removed', // [!code --]
|
||||
msg: 'Added' // [!code ++]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 高亮“错误”和“警告”
|
||||
|
||||
在某一行添加 `// [!code warning]` 或 `// [!code error]` 注释将会为该行相应的着色。
|
||||
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Error', // [\!code error]
|
||||
msg: 'Warning' // [\!code warning]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Error', // [!code error]
|
||||
msg: 'Warning' // [!code warning]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 代码块中 词高亮
|
||||
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```ts
|
||||
export function foo() { // [\!code word:Hello]
|
||||
const msg = 'Hello World'
|
||||
console.log(msg) // prints Hello World
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
```ts
|
||||
export function foo() { // [!code word:Hello]
|
||||
const msg = 'Hello World'
|
||||
console.log(msg) // prints Hello World
|
||||
}
|
||||
```
|
||||
|
||||
你还可以指定高亮显示的次数，例如 `[!code word:options:2]` 会高亮显示近两个 `options`。
|
||||
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```ts
|
||||
// [\!code word:options:2]
|
||||
const options = { foo: 'bar' }
|
||||
options.foo = 'baz'
|
||||
console.log(options.foo) // 这个不会被高亮显示
|
||||
```
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
```ts
|
||||
// [!code word:options:2]
|
||||
const options = { foo: 'bar' }
|
||||
options.foo = 'baz'
|
||||
console.log(options.foo) // 这个不会被高亮显示
|
||||
```
|
||||
|
||||
## 代码组
|
||||
|
||||
可以像这样对多个代码块进行分组：
|
||||
|
||||
**输入：**
|
||||
|
||||
````md
|
||||
::: code-tabs
|
||||
@tab config.js
|
||||
```js
|
||||
/**
|
||||
* @type {import('vuepress').UserConfig}
|
||||
*/
|
||||
const config = {
|
||||
// ..
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
@tab config.ts
|
||||
```ts
|
||||
import type { UserConfig } from 'vuepress'
|
||||
|
||||
const config: UserConfig = {
|
||||
// ..
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
:::
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
::: code-tabs
|
||||
@tab config.js
|
||||
|
||||
```js
|
||||
/**
|
||||
* @type {import('vuepress').UserConfig}
|
||||
*/
|
||||
const config = {
|
||||
// ..
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
@tab config.ts
|
||||
|
||||
```ts
|
||||
import type { UserConfig } from 'vuepress'
|
||||
|
||||
const config: UserConfig = {
|
||||
// ..
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
你还可以通过 `@tab:active`
|
||||
|
||||
## 导入代码块
|
||||
|
||||
**输入：**
|
||||
|
||||
你可以使用下面的语法，从文件中导入代码块：
|
||||
|
||||
```md
|
||||
@[code](../snippet/snippet-1.js)
|
||||
```
|
||||
|
||||
**输出：**
|
||||
|
||||
@[code](../../snippet/snippet-1.js)
|
||||
|
||||
如果你只想导入这个文件的一部分：
|
||||
|
||||
```md
|
||||
<!-- 仅导入第 1 行至第 10 行 -->
|
||||
@[code{1-10}](../snippet/snippet-1.js)
|
||||
```
|
||||
|
||||
代码语言会根据文件扩展名进行推断，但我们建议你显式指定：
|
||||
|
||||
```md
|
||||
<!-- 指定代码语言 -->
|
||||
@[code js](../snippet/snippet-1.js)
|
||||
|
||||
<!-- 行高亮 -->
|
||||
@[code js{2,4-5}](../foo.js)
|
||||
```
|
||||
|
||||
## 数学方程
|
||||
|
||||
**输入：**
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 高阶
|
||||
title: 更多
|
||||
author: pengzhanbo
|
||||
icon: ic:outline-auto-fix-high
|
||||
createTime: 2024/03/05 16:27:59
|
||||
@ -392,147 +392,6 @@ export default defineUserConfig({
|
||||
|
||||
@[caniuse{-2,-1,1,2,3}](css-matches-pseudo)
|
||||
|
||||
## CodePen
|
||||
|
||||
主题支持在 Markdown 文件中嵌入 [CodePen](https://codepen.io/)。
|
||||
|
||||
### 配置
|
||||
|
||||
此功能默认不启用，你可以在配置文件中启用它。
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownPower: {
|
||||
codepen: true, // [!code highlight]
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 语法
|
||||
|
||||
简单语法：
|
||||
|
||||
```md
|
||||
@[codepen](user/slash)
|
||||
```
|
||||
|
||||
更多选项支持：
|
||||
|
||||
```md
|
||||
@[codepen preview editable tab="css,result" theme="dark" height="500px" width="100%"](user/slash)
|
||||
```
|
||||
|
||||
- `preview`: 是否渲染为预览模式
|
||||
- `editable`: 是否可编辑
|
||||
- `tab`: 默认显示的标签， 默认为 `result`，多个使用 `,` 分隔
|
||||
- `theme`: 主题， 可选值 `dark` 和 `light`
|
||||
- `height`: 容器高度， 默认为 `400px`
|
||||
- `width`: 容器宽度， 默认为 `100%`
|
||||
- `user`: CodePen 用户名
|
||||
- `slash`: CodePen 代码文件名
|
||||
|
||||
### 示例
|
||||
|
||||
输入：
|
||||
|
||||
```md
|
||||
@[codepen](leimapapa/RwOZQOW)
|
||||
```
|
||||
|
||||
输出：
|
||||
|
||||
@[codepen](leimapapa/RwOZQOW)
|
||||
|
||||
**预览模式：**
|
||||
|
||||
输入：
|
||||
|
||||
```md
|
||||
@[codepen preview](leimapapa/RwOZQOW)
|
||||
```
|
||||
|
||||
输出：
|
||||
|
||||
@[codepen preview](leimapapa/RwOZQOW)
|
||||
|
||||
**编辑模式：**
|
||||
|
||||
输入：
|
||||
|
||||
```md
|
||||
@[codepen editable tab="html,result"](leimapapa/RwOZQOW)
|
||||
```
|
||||
|
||||
输出：
|
||||
|
||||
@[codepen editable tab="html,result"](leimapapa/RwOZQOW)
|
||||
|
||||
## Replit
|
||||
|
||||
主题支持在 Markdown 文件中嵌入 [Replit](https://replit.com/)。
|
||||
|
||||
### 配置
|
||||
|
||||
此功能默认不启用，你可以在配置文件中启用它。
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownPower: {
|
||||
replit: true, // [!code highlight]
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 语法
|
||||
|
||||
简单的语法
|
||||
|
||||
```md
|
||||
@[replit](user/repl-name)
|
||||
```
|
||||
|
||||
更多选项
|
||||
|
||||
```md
|
||||
@[replit title="" width="100%" height="450px" theme="dark"](user/repl-name#filepath)
|
||||
```
|
||||
|
||||
- `title`: 标题
|
||||
- `width`: 容器宽度
|
||||
- `height`: 容器高度
|
||||
- `theme`: 主题， 可选值 `dark` 和 `light`
|
||||
- `user`: Replit 用户名
|
||||
- `repl-name`: Replit repl 名称
|
||||
- `filepath`: Replit 默认打开的文件路径
|
||||
|
||||
输入：
|
||||
|
||||
```md
|
||||
@[replit](@TechPandaPro/Cursor-Hangout#package.json)
|
||||
````
|
||||
|
||||
输出：
|
||||
|
||||
@[replit](@TechPandaPro/Cursor-Hangout#package.json)
|
||||
|
||||
## 导入文件
|
||||
|
||||
主题支持在 Markdown 文件中导入文件切片。
|
||||
@ -705,458 +564,3 @@ export default defineUserConfig({
|
||||
:::: demo-wrapper title="Include by file region"
|
||||
<!-- @include: ../../snippet/include-2.snippet.md#snippet -->
|
||||
::::
|
||||
|
||||
## 代码演示
|
||||
|
||||
代码演示 默认不启用，你可以通过配置来启用它。
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownEnhance: {
|
||||
demo: true,
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 语法
|
||||
|
||||
```` md
|
||||
::: [类型]-demo 可选的标题文字
|
||||
|
||||
```html
|
||||
<!-- ↑ 使用可用的语言 -->
|
||||
<!-- 在代码块中放置你对应语言的代码，一个语言不能出现多个块 -->
|
||||
<!-- 你可以有多个代码块，并且 html, js, css 都是视情况可选的 -->
|
||||
```
|
||||
|
||||
```json
|
||||
// json block 作为插件配置存放处
|
||||
{
|
||||
// 放置你的配置 (可选的)
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::: tip 提示
|
||||
JSON 块是可选的，可用的配置详见[配置](https://vuepress-theme-hope.github.io/v2/md-enhance/zh/config.html)
|
||||
:::
|
||||
|
||||
插件支持三种类型
|
||||
|
||||
- normal(默认)
|
||||
- vue
|
||||
- react
|
||||
|
||||
### 可用的语言
|
||||
|
||||
你可以在演示块中使用不同语言。
|
||||
|
||||
当你设置一些不能在浏览器上直接运行的语言时，由于插件无法解析它们，因此网页演示将被禁用。插件只显示代码。同时提供一个 "在 CodePen 中打开" 按钮允许用户直接在 CodePen 打开并浏览代码。
|
||||
|
||||
可用的 HTML 语言:
|
||||
|
||||
- `"html"` (默认)
|
||||
- `"slim"`
|
||||
- `"haml"`
|
||||
- `"markdown"`
|
||||
|
||||
可用的 JS 语言:
|
||||
|
||||
- `"javascript"` (default)
|
||||
- `"coffeescript"`
|
||||
- `"babel"`
|
||||
- `"livescript"`
|
||||
- `"typescript"`
|
||||
|
||||
> 你也可以在代码块中使用 `js`, `ts`, `coffee` 和 `ls。`
|
||||
|
||||
可用的 CSS 语言:
|
||||
|
||||
- `"css"` (default)
|
||||
- `"less"`
|
||||
- `"scss"`
|
||||
- `"sass"`
|
||||
- `"stylus"`
|
||||
|
||||
### 不支持的语言
|
||||
|
||||
::: normal-demo 一个使用浏览器不支持解析语言 Demo
|
||||
|
||||
```md
|
||||
# 标题
|
||||
|
||||
十分强大
|
||||
```
|
||||
|
||||
```ts
|
||||
const message: string = 'VuePress Theme Hope'
|
||||
|
||||
document.querySelector('h1').innerHTML = message
|
||||
```
|
||||
|
||||
```scss
|
||||
h1 {
|
||||
font-style: italic;
|
||||
|
||||
+ p {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::: details 代码
|
||||
|
||||
```` md
|
||||
::: normal-demo 一个使用浏览器不支持解析语言 Demo
|
||||
|
||||
```md
|
||||
# 标题
|
||||
|
||||
十分强大
|
||||
```
|
||||
|
||||
```ts
|
||||
const message: string = 'VuePress Theme Hope'
|
||||
|
||||
document.querySelector('h1').innerHTML = message
|
||||
```
|
||||
|
||||
```scss
|
||||
h1 {
|
||||
font-style: italic;
|
||||
|
||||
+ p {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::::
|
||||
|
||||
### 普通代码演示
|
||||
|
||||
格式：
|
||||
|
||||
```` md
|
||||
::: normal-demo 可选的标题文字
|
||||
|
||||
```html
|
||||
<!-- html code -->
|
||||
```
|
||||
|
||||
```js
|
||||
// js code
|
||||
```
|
||||
|
||||
```css
|
||||
/* css code */
|
||||
```
|
||||
|
||||
```json
|
||||
// 配置 (可选)
|
||||
{
|
||||
"jsLib": [
|
||||
// ...
|
||||
],
|
||||
"cssLib": [
|
||||
// ...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::: warning 注意事项
|
||||
我们使用 `"ShadowDOM"` 进行样式隔离，并已经将 `document` 替换为了 `shadowRoot` 对象。如果需要访问页面的 `document，请访问` `window.document`。
|
||||
:::
|
||||
|
||||
#### 例子
|
||||
|
||||
::: normal-demo Demo 演示
|
||||
|
||||
```html
|
||||
<h1>Hello Word!</h1>
|
||||
<p><span id="very">非常</span>强大!</p>
|
||||
```
|
||||
|
||||
```js
|
||||
document.querySelector('#very').addEventListener('click', () => {
|
||||
alert('非常强大')
|
||||
})
|
||||
```
|
||||
|
||||
```css
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::: details 代码
|
||||
|
||||
```` md
|
||||
::: normal-demo Demo 演示
|
||||
|
||||
```html
|
||||
<h1>Hello Word!</h1>
|
||||
<p><span id="very">非常</span>强大!</p>
|
||||
```
|
||||
|
||||
```js
|
||||
document.querySelector('#very').addEventListener('click', () => {
|
||||
alert('非常强大')
|
||||
})
|
||||
```
|
||||
|
||||
```css
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::::
|
||||
|
||||
### Vue 代码演示
|
||||
|
||||
#### 格式
|
||||
|
||||
```` md
|
||||
::: vue-demo 可选的标题文字
|
||||
|
||||
```vue
|
||||
<!-- ↑ 你也可以使用 html -->
|
||||
<script>
|
||||
export default {
|
||||
// vue 组件
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- vue 模板 -->
|
||||
<div>demo</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* css 代码 */
|
||||
</style>
|
||||
```
|
||||
|
||||
```json
|
||||
// 配置 (可选)
|
||||
{}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::: warning 注意事项
|
||||
|
||||
- 你只能使用 `Vue3`。
|
||||
- 必须将组件通过 `export default` 默认导出
|
||||
- 我们使用 `"ShadowDOM"` 进行样式隔离，并已经将 `document` 替换为了 `shadowRoot` 对象。如果需要访问页面的 `document`，请访问 `window.document`。
|
||||
:::
|
||||
|
||||
#### 演示
|
||||
|
||||
::: vue-demo 一个 Vue Composition 演示
|
||||
|
||||
```vue
|
||||
<script>
|
||||
const { ref } = Vue
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const message = ref('powerful')
|
||||
|
||||
const handler = () => {
|
||||
message.value = `very ${message.value}`
|
||||
}
|
||||
|
||||
return {
|
||||
message,
|
||||
handler,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="box">
|
||||
<code>Hello Word</code> is
|
||||
<span @click="handler">{{ message }}</span>!
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.box span {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::: details 代码
|
||||
|
||||
```` md
|
||||
::: vue-demo 一个 Vue Composition 演示
|
||||
|
||||
```vue
|
||||
<script>
|
||||
const { ref } = Vue
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const message = ref('powerful')
|
||||
|
||||
const handler = () => {
|
||||
message.value = `very ${message.value}`
|
||||
}
|
||||
|
||||
return {
|
||||
message,
|
||||
handler,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="box">
|
||||
<code>Hello Word</code> is
|
||||
<span @click="handler">{{ message }}</span>!
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.box span {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::::
|
||||
|
||||
### React 代码演示
|
||||
|
||||
#### 格式
|
||||
|
||||
```` md
|
||||
::: react-demo 可选的标题文字
|
||||
|
||||
```js
|
||||
// 放置脚本，并通过 `export default` 导出你的 react 组件
|
||||
```
|
||||
|
||||
```css
|
||||
/* 你的 css 内容 */
|
||||
```
|
||||
|
||||
```json
|
||||
// 配置 (可选)
|
||||
{}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::: warning 注意事项
|
||||
|
||||
- 使用 React 的时候，为了解析 JSX 必须引入 Babel，此过程由插件自动完成。
|
||||
- 必须将组件通过 `export default` 默认导出
|
||||
- 我们使用 `"ShadowDOM"` 进行样式隔离，并已经将 `document` 替换为了 `shadowRoot` 对象。如果需要访问页面的 `document`，请访问 `window.document`。
|
||||
:::
|
||||
|
||||
#### 演示
|
||||
|
||||
::: react-demo 一个函数式 React Demo
|
||||
|
||||
```js
|
||||
const { useState } = React
|
||||
|
||||
export default () => {
|
||||
const [message, setMessage] = useState(' 强大')
|
||||
|
||||
const handler = () => {
|
||||
setMessage(`十分${message}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="box">
|
||||
<code>Hello Word !</code>
|
||||
<span id="powerful" onClick={handler}>
|
||||
{message}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.box #powerful {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::: details 代码
|
||||
|
||||
```` md
|
||||
::: react-demo 一个函数式 React Demo
|
||||
|
||||
```js
|
||||
const { useState } = React
|
||||
|
||||
export default () => {
|
||||
const [message, setMessage] = useState(' 强大')
|
||||
|
||||
const handler = () => {
|
||||
setMessage(`十分${message}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="box">
|
||||
<code>Hello Word !</code>
|
||||
<span id="powerful" onClick={handler}>
|
||||
{message}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.box #powerful {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::::
|
||||
|
||||
@ -42,6 +42,6 @@ VuePress 是一个 [静态站点生成器](https://en.wikipedia.org/wiki/Static_
|
||||
- 👀 支持 搜索、文章评论
|
||||
- 👨💻 支持 浅色/深色 主题 （包括代码高亮）
|
||||
- 📠 markdown 增强，支持 代码块分组、提示容器、任务列表、数学公式、代码演示 等
|
||||
- 📚 代码演示，支持 CodePen, Replit
|
||||
- 📊 嵌入图标，支持 chart.js，Echarts，Mermaid，flowchart
|
||||
- 📚 代码演示，支持 CodePen, Replit, JSFiddle, CodeSandbox
|
||||
- 📊 嵌入图标，支持 chart.js，Echarts，Mermaid，flowchart 等
|
||||
- 🎛 资源嵌入，支持 PDF, bilibili视频，youtube视频等
|
||||
|
||||
82
docs/notes/theme/guide/代码/codeSandbox.md
Normal file
82
docs/notes/theme/guide/代码/codeSandbox.md
Normal file
@ -0,0 +1,82 @@
|
||||
---
|
||||
title: Code Sandbox
|
||||
author: pengzhanbo
|
||||
icon: lucide:codesandbox
|
||||
createTime: 2024/04/04 03:42:13
|
||||
permalink: /guide/code/code-sandbox/
|
||||
---
|
||||
|
||||
主题支持在 Markdown 文件中嵌入 [Code Sandbox](https://codesandbox.io)。
|
||||
|
||||
## 配置
|
||||
|
||||
此功能默认不启用，你可以在配置文件中启用它。
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownPower: {
|
||||
codesandbox: true, // [!code highlight]
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 语法
|
||||
|
||||
### 简单语法
|
||||
|
||||
将 Code Sandbox 嵌入到页面中
|
||||
|
||||
```md
|
||||
@[codesandbox](id)
|
||||
```
|
||||
|
||||
使用 Code Sandbox 跳转按钮
|
||||
|
||||
```md
|
||||
@[codesandbox button](workspace/id)
|
||||
```
|
||||
|
||||
### 更多选项
|
||||
|
||||
```md
|
||||
@[codesanbox title="xxx" layout="Editor+Preview" height="500px" navbar="false" console](id#filepath)
|
||||
```
|
||||
|
||||
- `id`: Code Sandbox ID
|
||||
- `title`: Code Sandbox 标题
|
||||
- `layout`: 代码预览布局 可选值： `Preview`， `Editor`， `Editor+Preview`
|
||||
- `height`: 代码预览高度
|
||||
- `navbar`: 是否显示导航栏，默认为 true
|
||||
- `console`: 是否显示控制台，默认为 false
|
||||
- `filepath`: 文件路径
|
||||
|
||||
## 示例
|
||||
|
||||
codeSandbox 跳转按钮：
|
||||
|
||||
```md
|
||||
@[codesandbox button](reaction/5wyzu)
|
||||
```
|
||||
|
||||
输出：
|
||||
|
||||
@[codesandbox button](reaction/5wyzu)
|
||||
|
||||
codeSandbox 内嵌到页面中：
|
||||
|
||||
```md
|
||||
@[codesandbox](5wyzu)
|
||||
```
|
||||
|
||||
输出：
|
||||
|
||||
@[codesandbox](5wyzu)
|
||||
89
docs/notes/theme/guide/代码/codepen.md
Normal file
89
docs/notes/theme/guide/代码/codepen.md
Normal file
@ -0,0 +1,89 @@
|
||||
---
|
||||
title: Code Pen
|
||||
author: pengzhanbo
|
||||
icon: mingcute:codepen-line
|
||||
createTime: 2024/04/04 10:41:58
|
||||
permalink: /guide/code/code-pen/
|
||||
---
|
||||
|
||||
主题支持在 Markdown 文件中嵌入 [CodePen](https://codepen.io/)。
|
||||
|
||||
## 配置
|
||||
|
||||
此功能默认不启用，你可以在配置文件中启用它。
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownPower: {
|
||||
codepen: true, // [!code highlight]
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 语法
|
||||
|
||||
简单语法：
|
||||
|
||||
```md
|
||||
@[codepen](user/slash)
|
||||
```
|
||||
|
||||
更多选项支持：
|
||||
|
||||
```md
|
||||
@[codepen preview editable tab="css,result" theme="dark" height="500px" width="100%"](user/slash)
|
||||
```
|
||||
|
||||
- `preview`: 是否渲染为预览模式
|
||||
- `editable`: 是否可编辑
|
||||
- `tab`: 默认显示的标签， 默认为 `result`，多个使用 `,` 分隔
|
||||
- `theme`: 主题， 可选值 `dark` 和 `light`
|
||||
- `height`: 容器高度， 默认为 `400px`
|
||||
- `width`: 容器宽度， 默认为 `100%`
|
||||
- `user`: CodePen 用户名
|
||||
- `slash`: CodePen 代码文件名
|
||||
|
||||
## 示例
|
||||
|
||||
输入：
|
||||
|
||||
```md
|
||||
@[codepen](leimapapa/RwOZQOW)
|
||||
```
|
||||
|
||||
输出：
|
||||
|
||||
@[codepen](leimapapa/RwOZQOW)
|
||||
|
||||
**预览模式：**
|
||||
|
||||
输入：
|
||||
|
||||
```md
|
||||
@[codepen preview](leimapapa/RwOZQOW)
|
||||
```
|
||||
|
||||
输出：
|
||||
|
||||
@[codepen preview](leimapapa/RwOZQOW)
|
||||
|
||||
**编辑模式：**
|
||||
|
||||
输入：
|
||||
|
||||
```md
|
||||
@[codepen editable tab="html,result"](leimapapa/RwOZQOW)
|
||||
```
|
||||
|
||||
输出：
|
||||
|
||||
@[codepen editable tab="html,result"](leimapapa/RwOZQOW)
|
||||
73
docs/notes/theme/guide/代码/jsFiddle.md
Normal file
73
docs/notes/theme/guide/代码/jsFiddle.md
Normal file
@ -0,0 +1,73 @@
|
||||
---
|
||||
title: Js Fiddle
|
||||
author: pengzhanbo
|
||||
icon: bxl:jsfiddle
|
||||
createTime: 2024/04/04 10:42:21
|
||||
permalink: /guide/code/jsfiddle/
|
||||
---
|
||||
|
||||
主题支持在 Markdown 文件中嵌入 [JS Fiddle](https://jsfiddle.net/)。
|
||||
|
||||
## 配置
|
||||
|
||||
此功能默认不启用，你可以在配置文件中启用它。
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownPower: {
|
||||
jsfiddle: true, // [!code highlight]
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 语法
|
||||
|
||||
### 简单语法
|
||||
|
||||
```md
|
||||
@[jsfiddle](user/id)
|
||||
```
|
||||
|
||||
### 更多选项
|
||||
|
||||
```md
|
||||
@[jsfiddle theme="dark" tab="js,css,html,result" height="500px"](user/id)
|
||||
```
|
||||
|
||||
- `user`: 用户
|
||||
- `id`: jsfiddle id
|
||||
- `theme`: 主题模式， 可选值： `"light" | "dark"`
|
||||
- `tab`: 选项卡， 可选值：`"js" | "css" | "html" | "result"`, 多个用 `","` 分割，
|
||||
顺序将决定选项卡的排序，默认为 `js,css,html,result`
|
||||
- `height`: 高度
|
||||
|
||||
## 示例
|
||||
|
||||
输入：
|
||||
|
||||
```md
|
||||
@[jsfiddle](pengzhanbo/1xbwz2p9)
|
||||
```
|
||||
|
||||
输出：
|
||||
|
||||
@[jsfiddle](pengzhanbo/1xbwz2p9)
|
||||
|
||||
输入：
|
||||
|
||||
```md
|
||||
@[jsfiddle tab="result,js,css,html"](pengzhanbo/1xbwz2p9)
|
||||
```
|
||||
|
||||
输出：
|
||||
|
||||
@[jsfiddle tab="result,js,css,html"](pengzhanbo/1xbwz2p9)
|
||||
64
docs/notes/theme/guide/代码/replit.md
Normal file
64
docs/notes/theme/guide/代码/replit.md
Normal file
@ -0,0 +1,64 @@
|
||||
---
|
||||
title: Replit
|
||||
author: pengzhanbo
|
||||
icon: simple-icons:replit
|
||||
createTime: 2024/04/04 10:42:05
|
||||
permalink: /guide/code/replit/
|
||||
---
|
||||
|
||||
主题支持在 Markdown 文件中嵌入 [Replit](https://replit.com/)。
|
||||
|
||||
## 配置
|
||||
|
||||
此功能默认不启用，你可以在配置文件中启用它。
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownPower: {
|
||||
replit: true, // [!code highlight]
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 语法
|
||||
|
||||
简单的语法
|
||||
|
||||
```md
|
||||
@[replit](user/repl-name)
|
||||
```
|
||||
|
||||
更多选项
|
||||
|
||||
```md
|
||||
@[replit title="" width="100%" height="450px" theme="dark"](user/repl-name#filepath)
|
||||
```
|
||||
|
||||
- `title`: 标题
|
||||
- `width`: 容器宽度
|
||||
- `height`: 容器高度
|
||||
- `theme`: 主题， 可选值 `dark` 和 `light`
|
||||
- `user`: Replit 用户名
|
||||
- `repl-name`: Replit repl 名称
|
||||
- `filepath`: Replit 默认打开的文件路径
|
||||
|
||||
## 示例
|
||||
|
||||
输入：
|
||||
|
||||
```md
|
||||
@[replit](@TechPandaPro/Cursor-Hangout#package.json)
|
||||
````
|
||||
|
||||
输出：
|
||||
|
||||
@[replit](@TechPandaPro/Cursor-Hangout#package.json)
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 试验性
|
||||
title: Two Slash
|
||||
author: pengzhanbo
|
||||
icon: material-symbols:experiment-outline
|
||||
createTime: 2024/03/06 11:46:49
|
||||
@ -21,6 +21,7 @@ permalink: /guide/markdown/experiment/
|
||||
> - [x] `vuepress@2.0.0-rc.2`
|
||||
> - [x] `vuepress@2.0.0-rc.7`
|
||||
> - [x] `vuepress@2.0.0-rc.8`
|
||||
> - [x] `vuepress@2.0.0-rc.9`
|
||||
|
||||
### 概述
|
||||
|
||||
75
docs/notes/theme/guide/代码/介绍.md
Normal file
75
docs/notes/theme/guide/代码/介绍.md
Normal file
@ -0,0 +1,75 @@
|
||||
---
|
||||
title: 介绍
|
||||
author: pengzhanbo
|
||||
icon: ic:outline-code
|
||||
createTime: 2024/04/04 10:35:45
|
||||
permalink: /guide/code/intro/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
主题 使用 [Shiki](https://github.com/shikijs/shiki) 在 Markdown 代码块实现语法高亮。
|
||||
|
||||
## 语言
|
||||
|
||||
[Shiki](https://github.com/shikijs/shiki) 支持 超过 190+ 种语言，
|
||||
你可以在 [languages](https://shiki.style/languages) 查看所有支持的语言列表。
|
||||
|
||||
你可以通过以下语法为你使用的 语言所编写的代码 实现高亮效果：
|
||||
|
||||
````md
|
||||
```[lang]
|
||||
```
|
||||
````
|
||||
|
||||
其中，`[lang]` 为你使用的语言。
|
||||
|
||||
示例：
|
||||
|
||||
````md
|
||||
```js
|
||||
const a = 1
|
||||
console.log(a)
|
||||
```
|
||||
````
|
||||
|
||||
```js
|
||||
const a = 1
|
||||
console.log(a)
|
||||
```
|
||||
|
||||
## 高亮主题
|
||||
|
||||
[Shiki](https://github.com/shikijs/shiki) 支持 超过 40+ 种高亮主题。
|
||||
|
||||
你可以在 [Themes](https://shiki.style/themes) 找到所有支持的主题列表，根据个人的喜欢自定义
|
||||
高亮主题。
|
||||
|
||||
Theme Plume 默认为 代码块使用的主题配置：
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
shiki: {
|
||||
theme: { light: 'vitesse-light', dark: 'vitesse-dark' }, // [!code highlight]
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
默认配置支持在 亮色/暗色 模式分别使用 `vitesse-light`/`vitesse-dark` 主题。
|
||||
|
||||
## 更多支持
|
||||
|
||||
得益于 [Shiki](https://github.com/shikijs/shiki) 的强大能力，Theme Plume 还为 代码块
|
||||
提供了 更多的 [特性支持](/guide/code/features/)，它们让 代码块具备更强的表达能力。
|
||||
|
||||
同时，为了方便 更好的 完成 代码演示，Theme Plume 还提供了嵌入 [CodePen](/guide/code/code-pen/)，
|
||||
[Js Fiddle](/guide/code/jsfiddle/)，[Code Sandbox](/guide/code/code-sandbox/)，
|
||||
[Replit](/guide/code/replit/) 的语法支持，你可以很方便的嵌入代码演示。
|
||||
|
||||
## 示例
|
||||
|
||||
<!-- @include: ../../snippet/code-block.snippet.md -->
|
||||
462
docs/notes/theme/guide/代码/代码演示.md
Normal file
462
docs/notes/theme/guide/代码/代码演示.md
Normal file
@ -0,0 +1,462 @@
|
||||
---
|
||||
title: 代码演示
|
||||
author: pengzhanbo
|
||||
icon: carbon:demo
|
||||
createTime: 2024/04/04 11:39:05
|
||||
permalink: /guide/code/demo/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
代码演示 默认不启用，你可以通过配置来启用它。
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownEnhance: {
|
||||
demo: true,
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 语法
|
||||
|
||||
```` md
|
||||
::: [类型]-demo 可选的标题文字
|
||||
|
||||
```html
|
||||
<!-- ↑ 使用可用的语言 -->
|
||||
<!-- 在代码块中放置你对应语言的代码，一个语言不能出现多个块 -->
|
||||
<!-- 你可以有多个代码块，并且 html, js, css 都是视情况可选的 -->
|
||||
```
|
||||
|
||||
```json
|
||||
// json block 作为插件配置存放处
|
||||
{
|
||||
// 放置你的配置 (可选的)
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::: tip 提示
|
||||
JSON 块是可选的，可用的配置详见[配置](https://vuepress-theme-hope.github.io/v2/md-enhance/zh/config.html)
|
||||
:::
|
||||
|
||||
插件支持三种类型
|
||||
|
||||
- normal(默认)
|
||||
- vue
|
||||
- react
|
||||
|
||||
## 可用的语言
|
||||
|
||||
你可以在演示块中使用不同语言。
|
||||
|
||||
当你设置一些不能在浏览器上直接运行的语言时，由于插件无法解析它们，因此网页演示将被禁用。插件只显示代码。同时提供一个 "在 CodePen 中打开" 按钮允许用户直接在 CodePen 打开并浏览代码。
|
||||
|
||||
可用的 HTML 语言:
|
||||
|
||||
- `"html"` (默认)
|
||||
- `"slim"`
|
||||
- `"haml"`
|
||||
- `"markdown"`
|
||||
|
||||
可用的 JS 语言:
|
||||
|
||||
- `"javascript"` (default)
|
||||
- `"coffeescript"`
|
||||
- `"babel"`
|
||||
- `"livescript"`
|
||||
- `"typescript"`
|
||||
|
||||
> 你也可以在代码块中使用 `js`, `ts`, `coffee` 和 `ls。`
|
||||
|
||||
可用的 CSS 语言:
|
||||
|
||||
- `"css"` (default)
|
||||
- `"less"`
|
||||
- `"scss"`
|
||||
- `"sass"`
|
||||
- `"stylus"`
|
||||
|
||||
## 不支持的语言
|
||||
|
||||
::: normal-demo 一个使用浏览器不支持解析语言 Demo
|
||||
|
||||
```md
|
||||
# 标题
|
||||
|
||||
十分强大
|
||||
```
|
||||
|
||||
```ts
|
||||
const message: string = 'VuePress Theme Hope'
|
||||
|
||||
document.querySelector('h1').innerHTML = message
|
||||
```
|
||||
|
||||
```scss
|
||||
h1 {
|
||||
font-style: italic;
|
||||
|
||||
+ p {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::: details 代码
|
||||
|
||||
```` md
|
||||
::: normal-demo 一个使用浏览器不支持解析语言 Demo
|
||||
|
||||
```md
|
||||
# 标题
|
||||
|
||||
十分强大
|
||||
```
|
||||
|
||||
```ts
|
||||
const message: string = 'VuePress Theme Hope'
|
||||
|
||||
document.querySelector('h1').innerHTML = message
|
||||
```
|
||||
|
||||
```scss
|
||||
h1 {
|
||||
font-style: italic;
|
||||
|
||||
+ p {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::::
|
||||
|
||||
## 普通代码演示
|
||||
|
||||
格式：
|
||||
|
||||
```` md
|
||||
::: normal-demo 可选的标题文字
|
||||
|
||||
```html
|
||||
<!-- html code -->
|
||||
```
|
||||
|
||||
```js
|
||||
// js code
|
||||
```
|
||||
|
||||
```css
|
||||
/* css code */
|
||||
```
|
||||
|
||||
```json
|
||||
// 配置 (可选)
|
||||
{
|
||||
"jsLib": [
|
||||
// ...
|
||||
],
|
||||
"cssLib": [
|
||||
// ...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::: warning 注意事项
|
||||
我们使用 `"ShadowDOM"` 进行样式隔离，并已经将 `document` 替换为了 `shadowRoot` 对象。如果需要访问页面的 `document，请访问` `window.document`。
|
||||
:::
|
||||
|
||||
## 例子
|
||||
|
||||
::: normal-demo Demo 演示
|
||||
|
||||
```html
|
||||
<h1>Hello Word!</h1>
|
||||
<p><span id="very">非常</span>强大!</p>
|
||||
```
|
||||
|
||||
```js
|
||||
document.querySelector('#very').addEventListener('click', () => {
|
||||
alert('非常强大')
|
||||
})
|
||||
```
|
||||
|
||||
```css
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::: details 代码
|
||||
|
||||
```` md
|
||||
::: normal-demo Demo 演示
|
||||
|
||||
```html
|
||||
<h1>Hello Word!</h1>
|
||||
<p><span id="very">非常</span>强大!</p>
|
||||
```
|
||||
|
||||
```js
|
||||
document.querySelector('#very').addEventListener('click', () => {
|
||||
alert('非常强大')
|
||||
})
|
||||
```
|
||||
|
||||
```css
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::::
|
||||
|
||||
### Vue 代码演示
|
||||
|
||||
#### 格式
|
||||
|
||||
```` md
|
||||
::: vue-demo 可选的标题文字
|
||||
|
||||
```vue
|
||||
<!-- ↑ 你也可以使用 html -->
|
||||
<script>
|
||||
export default {
|
||||
// vue 组件
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- vue 模板 -->
|
||||
<div>demo</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* css 代码 */
|
||||
</style>
|
||||
```
|
||||
|
||||
```json
|
||||
// 配置 (可选)
|
||||
{}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::: warning 注意事项
|
||||
|
||||
- 你只能使用 `Vue3`。
|
||||
- 必须将组件通过 `export default` 默认导出
|
||||
- 我们使用 `"ShadowDOM"` 进行样式隔离，并已经将 `document` 替换为了 `shadowRoot` 对象。如果需要访问页面的 `document`，请访问 `window.document`。
|
||||
:::
|
||||
|
||||
#### 演示
|
||||
|
||||
::: vue-demo 一个 Vue Composition 演示
|
||||
|
||||
```vue
|
||||
<script>
|
||||
const { ref } = Vue
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const message = ref('powerful')
|
||||
|
||||
const handler = () => {
|
||||
message.value = `very ${message.value}`
|
||||
}
|
||||
|
||||
return {
|
||||
message,
|
||||
handler,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="box">
|
||||
<code>Hello Word</code> is
|
||||
<span @click="handler">{{ message }}</span>!
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.box span {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::: details 代码
|
||||
|
||||
```` md
|
||||
::: vue-demo 一个 Vue Composition 演示
|
||||
|
||||
```vue
|
||||
<script>
|
||||
const { ref } = Vue
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const message = ref('powerful')
|
||||
|
||||
const handler = () => {
|
||||
message.value = `very ${message.value}`
|
||||
}
|
||||
|
||||
return {
|
||||
message,
|
||||
handler,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="box">
|
||||
<code>Hello Word</code> is
|
||||
<span @click="handler">{{ message }}</span>!
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.box span {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::::
|
||||
|
||||
### React 代码演示
|
||||
|
||||
#### 格式
|
||||
|
||||
```` md
|
||||
::: react-demo 可选的标题文字
|
||||
|
||||
```js
|
||||
// 放置脚本，并通过 `export default` 导出你的 react 组件
|
||||
```
|
||||
|
||||
```css
|
||||
/* 你的 css 内容 */
|
||||
```
|
||||
|
||||
```json
|
||||
// 配置 (可选)
|
||||
{}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::: warning 注意事项
|
||||
|
||||
- 使用 React 的时候，为了解析 JSX 必须引入 Babel，此过程由插件自动完成。
|
||||
- 必须将组件通过 `export default` 默认导出
|
||||
- 我们使用 `"ShadowDOM"` 进行样式隔离，并已经将 `document` 替换为了 `shadowRoot` 对象。如果需要访问页面的 `document`，请访问 `window.document`。
|
||||
:::
|
||||
|
||||
#### 演示
|
||||
|
||||
::: react-demo 一个函数式 React Demo
|
||||
|
||||
```js
|
||||
const { useState } = React
|
||||
|
||||
export default () => {
|
||||
const [message, setMessage] = useState(' 强大')
|
||||
|
||||
const handler = () => {
|
||||
setMessage(`十分${message}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="box">
|
||||
<code>Hello Word !</code>
|
||||
<span id="powerful" onClick={handler}>
|
||||
{message}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.box #powerful {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::: details 代码
|
||||
|
||||
```` md
|
||||
::: react-demo 一个函数式 React Demo
|
||||
|
||||
```js
|
||||
const { useState } = React
|
||||
|
||||
export default () => {
|
||||
const [message, setMessage] = useState(' 强大')
|
||||
|
||||
const handler = () => {
|
||||
setMessage(`十分${message}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="box">
|
||||
<code>Hello Word !</code>
|
||||
<span id="powerful" onClick={handler}>
|
||||
{message}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.box #powerful {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::::
|
||||
72
docs/notes/theme/guide/代码/代码组.md
Normal file
72
docs/notes/theme/guide/代码/代码组.md
Normal file
@ -0,0 +1,72 @@
|
||||
---
|
||||
title: 代码组
|
||||
author: pengzhanbo
|
||||
icon: fluent:group-list-20-filled
|
||||
createTime: 2024/04/04 10:36:59
|
||||
permalink: /guide/code/group/
|
||||
---
|
||||
|
||||
## 语法
|
||||
|
||||
可以像这样对多个代码块进行分组：
|
||||
|
||||
**输入：**
|
||||
|
||||
````md
|
||||
::: code-tabs
|
||||
@tab config.js
|
||||
```js
|
||||
/**
|
||||
* @type {import('vuepress').UserConfig}
|
||||
*/
|
||||
const config = {
|
||||
// ..
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
@tab config.ts
|
||||
```ts
|
||||
import type { UserConfig } from 'vuepress'
|
||||
|
||||
const config: UserConfig = {
|
||||
// ..
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
:::
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
::: code-tabs
|
||||
@tab config.js
|
||||
|
||||
```js
|
||||
/**
|
||||
* @type {import('vuepress').UserConfig}
|
||||
*/
|
||||
const config = {
|
||||
// ..
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
@tab config.ts
|
||||
|
||||
```ts
|
||||
import type { UserConfig } from 'vuepress'
|
||||
|
||||
const config: UserConfig = {
|
||||
// ..
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
你还可以通过 `@tab:active` 选择其中一个代码块作为默认显示的代码块。
|
||||
44
docs/notes/theme/guide/代码/导入代码.md
Normal file
44
docs/notes/theme/guide/代码/导入代码.md
Normal file
@ -0,0 +1,44 @@
|
||||
---
|
||||
title: 导入代码
|
||||
author: pengzhanbo
|
||||
icon: mdi:import
|
||||
createTime: 2024/04/04 10:39:22
|
||||
permalink: /guide/code/import/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
导入代码 可以让你在 md 文件中 导入另一个文件的 代码，并为其高亮显示。
|
||||
|
||||
它可以帮助你在文章中引用其他文件的代码，避免编写重复的代码。
|
||||
|
||||
## 语法
|
||||
|
||||
你可以使用下面的语法，从文件中导入代码块：
|
||||
|
||||
**输入：**
|
||||
|
||||
```md
|
||||
@[code](../snippet/snippet-1.js)
|
||||
```
|
||||
|
||||
**输出：**
|
||||
|
||||
@[code](../../snippet/snippet-1.js)
|
||||
|
||||
如果你只想导入这个文件的一部分：
|
||||
|
||||
```md
|
||||
<!-- 仅导入第 1 行至第 10 行 -->
|
||||
@[code{1-10}](../snippet/snippet-1.js)
|
||||
```
|
||||
|
||||
代码语言会根据文件扩展名进行推断，但我们建议你显式指定：
|
||||
|
||||
```md
|
||||
<!-- 指定代码语言 -->
|
||||
@[code js](../snippet/snippet-1.js)
|
||||
|
||||
<!-- 行高亮 -->
|
||||
@[code js{2,4-5}](../foo.js)
|
||||
```
|
||||
247
docs/notes/theme/guide/代码/特性支持.md
Normal file
247
docs/notes/theme/guide/代码/特性支持.md
Normal file
@ -0,0 +1,247 @@
|
||||
---
|
||||
title: 特性支持
|
||||
author: pengzhanbo
|
||||
icon: majesticons:code-block-line
|
||||
createTime: 2024/04/04 10:41:28
|
||||
permalink: /guide/code/features/
|
||||
---
|
||||
|
||||
主题在代码高亮功能上，进一步支持了更多的特性，它们能够帮助你的代码块更加具备表达力。
|
||||
|
||||
## 在代码块中实现行高亮
|
||||
|
||||
在 `[lang]` 之后紧跟随 `{xxxx}` ，可以实现行高亮，其中 `xxx` 表示要高亮的行号。
|
||||
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js{4}
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Highlighted!'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
```js{4}
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Highlighted!'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
除了单行之外，还可以指定多个单行、多行，或两者均指定：
|
||||
|
||||
- 多行：例如 `{5-8}`、`{3-10}`、`{10-17}`
|
||||
- 多个单行：例如 `{4,7,9}`
|
||||
- 多行与单行：例如 `{4,7-13,16,23-27,40}`
|
||||
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js{1,4,6-8}
|
||||
export default { // Highlighted
|
||||
data () {
|
||||
return {
|
||||
msg: `Highlighted!
|
||||
This line isn't highlighted,
|
||||
but this and the next 2 are.`,
|
||||
motd: 'VitePress is awesome',
|
||||
lorem: 'ipsum'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
```js{1,4,6-8}
|
||||
export default { // Highlighted
|
||||
data () {
|
||||
return {
|
||||
msg: `Highlighted!
|
||||
This line isn't highlighted,
|
||||
but this and the next 2 are.`,
|
||||
motd: 'VitePress is awesome',
|
||||
lorem: 'ipsum'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
也可以使用 `// [!code highlight]` 注释实现行高亮。
|
||||
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Highlighted!' // [\!code highlight]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Highlighted!' // [!code highlight]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 代码块中聚焦
|
||||
|
||||
在某一行上添加 `// [!code focus]` 注释将聚焦它并模糊代码的其他部分。
|
||||
|
||||
此外，可以使用 `// [!code focus:<lines>]` 定义要聚焦的行数。
|
||||
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Focused!' // [\!code focus]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Focused!' // [!code focus]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 代码块中的颜色差异
|
||||
|
||||
在某一行添加 `// [!code --]` 或 `// [!code ++]` 注释将会为该行创建 diff，同时保留代码块的颜色。
|
||||
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Removed', // [\!code --]
|
||||
msg: 'Added' // [\!code ++]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Removed', // [!code --]
|
||||
msg: 'Added' // [!code ++]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 高亮“错误”和“警告”
|
||||
|
||||
在某一行添加 `// [!code warning]` 或 `// [!code error]` 注释将会为该行相应的着色。
|
||||
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Error', // [\!code error]
|
||||
msg: 'Warning' // [\!code warning]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Error', // [!code error]
|
||||
msg: 'Warning' // [!code warning]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 代码块中 词高亮
|
||||
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```ts
|
||||
export function foo() { // [\!code word:Hello]
|
||||
const msg = 'Hello World'
|
||||
console.log(msg) // prints Hello World
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
```ts
|
||||
export function foo() { // [!code word:Hello]
|
||||
const msg = 'Hello World'
|
||||
console.log(msg) // prints Hello World
|
||||
}
|
||||
```
|
||||
|
||||
你还可以指定高亮显示的次数，例如 `[!code word:options:2]` 会高亮显示近两个 `options`。
|
||||
|
||||
**输入：**
|
||||
|
||||
````
|
||||
```ts
|
||||
// [\!code word:options:2]
|
||||
const options = { foo: 'bar' }
|
||||
options.foo = 'baz'
|
||||
console.log(options.foo) // 这个不会被高亮显示
|
||||
```
|
||||
````
|
||||
|
||||
**输出：**
|
||||
|
||||
```ts
|
||||
// [!code word:options:2]
|
||||
const options = { foo: 'bar' }
|
||||
options.foo = 'baz'
|
||||
console.log(options.foo) // 这个不会被高亮显示
|
||||
```
|
||||
@ -95,7 +95,7 @@ npm i -D vuepress-theme-plume @vuepress/bundler-vite@next
|
||||
:::
|
||||
|
||||
:::warning
|
||||
主题当前版本 已适配至 `vuepress@2.0.0-rc.8`，你应该安装这个版本的 VuePress。
|
||||
主题当前版本 已适配至 `vuepress@2.0.0-rc.9`，你应该安装这个版本的 VuePress。
|
||||
高于或低于这个版本，可能会存在潜在的兼容性问题。
|
||||
:::
|
||||
|
||||
|
||||
@ -50,4 +50,4 @@ __example:__
|
||||
## 文章写作
|
||||
|
||||
你可以使用 `markdown` 语法开始在 `sourceDir` 下新建 `Markdown` 文件，编写你自己的文章了，
|
||||
关于 markdown 扩展的功能支持，请查看 [这个文档](/guide/markdown/)。
|
||||
关于 markdown 扩展的功能支持，请查看 [这个文档](/guide/markdown/extensions/)。
|
||||
|
||||
1176
docs/notes/theme/snippet/code-block.snippet.md
Normal file
1176
docs/notes/theme/snippet/code-block.snippet.md
Normal file
File diff suppressed because it is too large
Load Diff
@ -199,3 +199,41 @@ pnpm add @iconify/json
|
||||
- `title` 为标题
|
||||
- `height` 为高度
|
||||
- `theme` 为主题， 可选值包括 `dark` 和 `light`
|
||||
|
||||
### CodeSandbox
|
||||
|
||||
插件默认不启用该功能，你需要手动设置 `codesandbox` 为 `true`
|
||||
|
||||
#### 语法
|
||||
|
||||
```md
|
||||
@[codesandbox](id)
|
||||
@[codesandbox button](workspace/id)
|
||||
@[codesanbox title="xxx" layout="Editor+Preview" height="500px" navbar="false" console](id#filepath)
|
||||
```
|
||||
|
||||
- `id`: Code Sandbox ID
|
||||
- `title`: Code Sandbox 标题
|
||||
- `layout`: 代码预览布局 可选值： `Preview`， `Editor`， `Editor+Preview`
|
||||
- `height`: 代码预览高度
|
||||
- `navbar`: 是否显示导航栏，默认为 true
|
||||
- `console`: 是否显示控制台，默认为 false
|
||||
- `filepath`: 文件路径
|
||||
|
||||
### JSFiddle
|
||||
|
||||
插件默认不启用该功能，你需要手动设置 `jsfiddle` 为 `true`
|
||||
|
||||
#### 语法
|
||||
|
||||
```md
|
||||
@[jsfiddle](user/id)
|
||||
@[jsfiddle theme="dark" tab="js,css,html,result" height="500px"](user/id)
|
||||
```
|
||||
|
||||
- `user`: 用户
|
||||
- `id`: jsfiddle id
|
||||
- `theme`: 主题模式， 可选值： `"light" | "dark"`
|
||||
- `tab`: 选项卡， 可选值：`"js" | "css" | "html" | "result"`, 多个用 `","` 分割，
|
||||
顺序将决定选项卡的排序，默认为 `js,css,html,result`
|
||||
- `height`: 高度
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user