mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
style: lint fix
This commit is contained in:
parent
aa19049f5b
commit
9b9f8f3f77
@ -401,7 +401,7 @@ end tell
|
|||||||
在代码块里面, `&` 、 `<` 和 `>` 会自动转成 HTML 实体,这样的方式让你非常容易使用 Markdown 插入范例用的 HTML 原始码,只需要复制粘贴,再加上缩进就可以了,剩下的 Markdown 都会帮你处理,例如:
|
在代码块里面, `&` 、 `<` 和 `>` 会自动转成 HTML 实体,这样的方式让你非常容易使用 Markdown 插入范例用的 HTML 原始码,只需要复制粘贴,再加上缩进就可以了,剩下的 Markdown 都会帮你处理,例如:
|
||||||
|
|
||||||
````md
|
````md
|
||||||
```
|
```html
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
© 2004 Foo Corporation
|
© 2004 Foo Corporation
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -239,7 +239,7 @@ Shiki 支持多种编程语言。需要做的就是将有效的语言别名附
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
name: 'MyComponent',
|
name: 'MyComponent',
|
||||||
@ -248,7 +248,7 @@ export default {
|
|||||||
```
|
```
|
||||||
````
|
````
|
||||||
|
|
||||||
````
|
````md
|
||||||
```html
|
```html
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="todo in todos" :key="todo.id">
|
<li v-for="todo in todos" :key="todo.id">
|
||||||
@ -281,7 +281,7 @@ export default {
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```js{4}
|
```js{4}
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
@ -313,7 +313,7 @@ export default {
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```js{1,4,6-8}
|
```js{1,4,6-8}
|
||||||
export default { // Highlighted
|
export default { // Highlighted
|
||||||
data () {
|
data () {
|
||||||
@ -349,10 +349,10 @@ export default { // Highlighted
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
msg: 'Highlighted!' // [\!code highlight]
|
msg: 'Highlighted!' // [\!code highlight]
|
||||||
}
|
}
|
||||||
@ -381,10 +381,10 @@ export default {
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
msg: 'Focused!' // [\!code focus]
|
msg: 'Focused!' // [\!code focus]
|
||||||
}
|
}
|
||||||
@ -411,10 +411,10 @@ export default {
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
remove: 'Removed', // [\!code --]
|
remove: 'Removed', // [\!code --]
|
||||||
add: 'Added' // [\!code ++]
|
add: 'Added' // [\!code ++]
|
||||||
@ -443,10 +443,10 @@ export default {
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
error: 'Error', // [\!code error]
|
error: 'Error', // [\!code error]
|
||||||
warning: 'Warning' // [\!code warning]
|
warning: 'Warning' // [\!code warning]
|
||||||
@ -473,7 +473,7 @@ export default {
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```ts
|
```ts
|
||||||
export function foo() { // [\!code word:Hello]
|
export function foo() { // [\!code word:Hello]
|
||||||
const msg = 'Hello World'
|
const msg = 'Hello World'
|
||||||
@ -495,7 +495,7 @@ export function foo() { // [!code word:Hello]
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```ts
|
```ts
|
||||||
// [\!code word:options:2]
|
// [\!code word:options:2]
|
||||||
const options = { foo: 'bar' }
|
const options = { foo: 'bar' }
|
||||||
@ -613,7 +613,7 @@ export default config
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
|
When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
|
||||||
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
|
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
|
||||||
|
|
||||||
@ -711,7 +711,7 @@ vuepress-theme-plume 是一个 ==简洁美观== 的 主题
|
|||||||
这将为图片添加 一个 名为 `full-width` 的 class 属性,以及一个 `width` 属性,值为 `100%`。
|
这将为图片添加 一个 名为 `full-width` 的 class 属性,以及一个 `width` 属性,值为 `100%`。
|
||||||
|
|
||||||
```md
|
```md
|
||||||
{.full-width width="100%"}
|
{.full-width width="100%"}
|
||||||
```
|
```
|
||||||
|
|
||||||
同时也支持其他属性:
|
同时也支持其他属性:
|
||||||
|
|||||||
@ -266,7 +266,7 @@ books:
|
|||||||
- 1984:
|
- 1984:
|
||||||
author: *gOrwell
|
author: *gOrwell
|
||||||
- animal-farm:
|
- animal-farm:
|
||||||
author: *gOrwell
|
author:*gOrwell
|
||||||
---
|
---
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -269,7 +269,7 @@ books:
|
|||||||
- 1984:
|
- 1984:
|
||||||
author: *gOrwell
|
author: *gOrwell
|
||||||
- animal-farm:
|
- animal-farm:
|
||||||
author: *gOrwell
|
author:*gOrwell
|
||||||
---
|
---
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -346,6 +346,6 @@ Symbols that should probably not be used in text: `=>`, `->`, `:>`, `|`, `@>`, a
|
|||||||
|
|
||||||
To emphasize a specific path in the flowchart, you can additionally define it as follows:
|
To emphasize a specific path in the flowchart, you can additionally define it as follows:
|
||||||
|
|
||||||
```
|
```md
|
||||||
st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})
|
st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})
|
||||||
```
|
```
|
||||||
|
|||||||
@ -260,7 +260,7 @@ object NewYork
|
|||||||
|
|
||||||
map CapitalCity {
|
map CapitalCity {
|
||||||
UK *-> London
|
UK *-> London
|
||||||
USA *--> Washington
|
USA*--> Washington
|
||||||
Germany *---> Berlin
|
Germany *---> Berlin
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -427,9 +427,9 @@ rectangle "Investigate" as I <<$bProcess>><<behavior>> #Business
|
|||||||
rectangle "Pay" as P <<$bProcess>><<behavior>> #Business
|
rectangle "Pay" as P <<$bProcess>><<behavior>> #Business
|
||||||
|
|
||||||
HC *-down- CI
|
HC *-down- CI
|
||||||
HC *-down- NAS
|
HC*-down- NAS
|
||||||
HC *-down- V
|
HC *-down- V
|
||||||
HC *-down- I
|
HC*-down- I
|
||||||
HC *-down- P
|
HC *-down- P
|
||||||
|
|
||||||
CI -right->> NAS
|
CI -right->> NAS
|
||||||
@ -574,16 +574,16 @@ caption figure 1
|
|||||||
title My super title
|
title My super title
|
||||||
|
|
||||||
* <&flag>Debian
|
* <&flag>Debian
|
||||||
** <&globe>Ubuntu
|
**<&globe>Ubuntu
|
||||||
*** Linux Mint
|
***Linux Mint
|
||||||
*** Kubuntu
|
*** Kubuntu
|
||||||
*** Lubuntu
|
***Lubuntu
|
||||||
*** KDE Neon
|
*** KDE Neon
|
||||||
** <&graph>LMDE
|
** <&graph>LMDE
|
||||||
** <&pulse>SolydXK
|
**<&pulse>SolydXK
|
||||||
** <&people>SteamOS
|
** <&people>SteamOS
|
||||||
** <&star>Raspbian with a very long name
|
** <&star>Raspbian with a very long name
|
||||||
*** <s>Raspmbc</s> => OSMC
|
***<s>Raspmbc</s> => OSMC
|
||||||
*** <s>Raspyfi</s> => Volumio
|
*** <s>Raspyfi</s> => Volumio
|
||||||
|
|
||||||
header
|
header
|
||||||
@ -630,9 +630,9 @@ endlegend
|
|||||||
|
|
||||||
```md
|
```md
|
||||||
@startjson
|
@startjson
|
||||||
#highlight "lastName"
|
# highlight "lastName"
|
||||||
#highlight "address" / "city"
|
# highlight "address" / "city"
|
||||||
#highlight "phoneNumbers" / "0" / "number"
|
# highlight "phoneNumbers" / "0" / "number"
|
||||||
{
|
{
|
||||||
"firstName": "John",
|
"firstName": "John",
|
||||||
"lastName": "Smith",
|
"lastName": "Smith",
|
||||||
|
|||||||
@ -49,7 +49,7 @@ for example `:line-numbers=2` indicates that line numbers in the code block star
|
|||||||
|
|
||||||
**Input:**
|
**Input:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```ts:line-numbers
|
```ts:line-numbers
|
||||||
// Line numbers enabled
|
// Line numbers enabled
|
||||||
const line2 = 'This is line 2'
|
const line2 = 'This is line 2'
|
||||||
@ -95,7 +95,7 @@ Add `{xxxx}` immediately after `[lang]` to enable line highlighting, where `xxx`
|
|||||||
|
|
||||||
**Input:**
|
**Input:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```js{4}
|
```js{4}
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
@ -127,7 +127,7 @@ In addition to single lines, you can specify multiple single lines, line ranges,
|
|||||||
|
|
||||||
**Input:**
|
**Input:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```js{1,4,6-8}
|
```js{1,4,6-8}
|
||||||
export default { // Highlighted
|
export default { // Highlighted
|
||||||
data () {
|
data () {
|
||||||
@ -163,10 +163,10 @@ You can also use the `// [!code highlight]` comment to enable line highlighting.
|
|||||||
|
|
||||||
**Input:**
|
**Input:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
msg: 'Highlighted!' // [\!code highlight]
|
msg: 'Highlighted!' // [\!code highlight]
|
||||||
}
|
}
|
||||||
@ -195,10 +195,10 @@ Additionally, you can use `// [!code focus:<lines>]` to define the number of lin
|
|||||||
|
|
||||||
**Input:**
|
**Input:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
msg: 'Focused!' // [\!code focus]
|
msg: 'Focused!' // [\!code focus]
|
||||||
}
|
}
|
||||||
@ -242,10 +242,10 @@ Adding `// [!code --]` or `// [!code ++]` comments to a line will create a diff
|
|||||||
|
|
||||||
**Input:**
|
**Input:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
error: 'Removed', // [\!code --]
|
error: 'Removed', // [\!code --]
|
||||||
warning: 'Added' // [\!code ++]
|
warning: 'Added' // [\!code ++]
|
||||||
@ -289,10 +289,10 @@ Adding `// [!code warning]` or `// [!code error]` comments to a line will apply
|
|||||||
|
|
||||||
**Input:**
|
**Input:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
error: 'Error', // [\!code error]
|
error: 'Error', // [\!code error]
|
||||||
warning: 'Warning' // [\!code warning]
|
warning: 'Warning' // [\!code warning]
|
||||||
@ -334,7 +334,7 @@ mkdir hello && cd hello # [!code warning]
|
|||||||
|
|
||||||
**Input:**
|
**Input:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```ts
|
```ts
|
||||||
export function foo() { // [\!code word:Hello]
|
export function foo() { // [\!code word:Hello]
|
||||||
const msg = 'Hello World'
|
const msg = 'Hello World'
|
||||||
@ -357,7 +357,7 @@ will highlight only the first two occurrences of `options`.
|
|||||||
|
|
||||||
**Input:**
|
**Input:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```ts
|
```ts
|
||||||
// [\!code word:options:2]
|
// [\!code word:options:2]
|
||||||
const options = { foo: 'bar' }
|
const options = { foo: 'bar' }
|
||||||
|
|||||||
@ -61,7 +61,7 @@ In Markdown, the `::: card-masonry` container can be used instead of `<CardMason
|
|||||||
``` md
|
``` md
|
||||||
::: card-masonry cols="3" gap="16" <!-- [!code hl]-->
|
::: card-masonry cols="3" gap="16" <!-- [!code hl]-->
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
<!-- More content -->
|
<!-- More content -->
|
||||||
|
|
||||||
@ -79,17 +79,17 @@ Masonry layout is particularly suitable for displaying images. You can directly
|
|||||||
``` md
|
``` md
|
||||||
::: card-masonry
|
::: card-masonry
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||

|

|
||||||
|
|
||||||

|

|
||||||
|
|
||||||

|

|
||||||
|
|
||||||

|

|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
:::
|
:::
|
||||||
```
|
```
|
||||||
|
|||||||
@ -36,11 +36,11 @@ For more configuration options, please refer to [@vuepress/plugin-photo-swipe](h
|
|||||||
Image preview can be disabled by using the `no-view` or `ignore` class names, or the `no-view` attribute.
|
Image preview can be disabled by using the `no-view` or `ignore` class names, or the `no-view` attribute.
|
||||||
|
|
||||||
```md
|
```md
|
||||||
{.no-view}
|
{.no-view}
|
||||||
{.ignore}
|
{.ignore}
|
||||||
{no-view}
|
{no-view}
|
||||||
|
|
||||||
<img src="path/to/image" class="no-view">
|
<img src="path/to/image" class="no-view" alt="alt text">
|
||||||
<img src="path/to/image" class="ignore">
|
<img src="path/to/image" class="ignore" alt="alt text">
|
||||||
<img src="path/to/image" no-view>
|
<img src="path/to/image" no-view alt="alt text">
|
||||||
```
|
```
|
||||||
|
|||||||
@ -90,7 +90,7 @@ In markdown, use local asset paths directly:
|
|||||||
```md
|
```md
|
||||||

|

|
||||||
|
|
||||||
<img src="/images/foo.jpg">
|
<img src="/images/foo.jpg" alt="foo">
|
||||||
```
|
```
|
||||||
|
|
||||||
In `javascript`:
|
In `javascript`:
|
||||||
|
|||||||
@ -391,7 +391,7 @@ Output:
|
|||||||
|
|
||||||
[Add more style support for Fontawesome](https://docs.fontawesome.com/web/style/styling){.read-more}
|
[Add more style support for Fontawesome](https://docs.fontawesome.com/web/style/styling){.read-more}
|
||||||
|
|
||||||
```
|
```md
|
||||||
::circle-user 2xl:: <!-- 2xl is shorthand for fa-2xl, icon size is 2em -->
|
::circle-user 2xl:: <!-- 2xl is shorthand for fa-2xl, icon size is 2em -->
|
||||||
::circle-user rotate-90:: <!-- icon rotated 90 degrees -->
|
::circle-user rotate-90:: <!-- icon rotated 90 degrees -->
|
||||||
::circle-user beat:: <!-- icon animation -->
|
::circle-user beat:: <!-- icon animation -->
|
||||||
|
|||||||
@ -84,7 +84,7 @@ You can also control behavior through attribute syntax:
|
|||||||
|
|
||||||
Use the `plot` option in Frontmatter to control the default behavior of this feature on the current page:
|
Use the `plot` option in Frontmatter to control the default behavior of this feature on the current page:
|
||||||
|
|
||||||
```
|
```md
|
||||||
---
|
---
|
||||||
plot:
|
plot:
|
||||||
trigger: hover
|
trigger: hover
|
||||||
|
|||||||
@ -77,7 +77,7 @@ which represent the bound value of the tab and whether the tab is currently acti
|
|||||||
|
|
||||||
**Input:**
|
**Input:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
::: tabs
|
::: tabs
|
||||||
@tab npm
|
@tab npm
|
||||||
|
|
||||||
|
|||||||
@ -532,7 +532,8 @@ Using the demo container to wrap demo code in a markdown file allows for quick d
|
|||||||
/* css code */
|
/* css code */
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
```
|
````
|
||||||
|
|
||||||
::::
|
::::
|
||||||
|
|
||||||
You can also wrap `::: code-tabs` within `::: demo` for better code block presentation:
|
You can also wrap `::: code-tabs` within `::: demo` for better code block presentation:
|
||||||
@ -562,7 +563,8 @@ You can also wrap `::: code-tabs` within `::: demo` for better code block presen
|
|||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
::::
|
::::
|
||||||
```
|
````
|
||||||
|
|
||||||
:::::
|
:::::
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|||||||
@ -342,6 +342,6 @@ e=>end: End:>http://www.yahoo.com
|
|||||||
|
|
||||||
如果要在流程图中强调特定路径,则可以另外定义它,如下所示:
|
如果要在流程图中强调特定路径,则可以另外定义它,如下所示:
|
||||||
|
|
||||||
```
|
```md
|
||||||
st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})
|
st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})
|
||||||
```
|
```
|
||||||
|
|||||||
@ -260,7 +260,7 @@ object NewYork
|
|||||||
|
|
||||||
map CapitalCity {
|
map CapitalCity {
|
||||||
UK *-> London
|
UK *-> London
|
||||||
USA *--> Washington
|
USA*--> Washington
|
||||||
Germany *---> Berlin
|
Germany *---> Berlin
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -427,9 +427,9 @@ rectangle "Investigate" as I <<$bProcess>><<behavior>> #Business
|
|||||||
rectangle "Pay" as P <<$bProcess>><<behavior>> #Business
|
rectangle "Pay" as P <<$bProcess>><<behavior>> #Business
|
||||||
|
|
||||||
HC *-down- CI
|
HC *-down- CI
|
||||||
HC *-down- NAS
|
HC*-down- NAS
|
||||||
HC *-down- V
|
HC *-down- V
|
||||||
HC *-down- I
|
HC*-down- I
|
||||||
HC *-down- P
|
HC *-down- P
|
||||||
|
|
||||||
CI -right->> NAS
|
CI -right->> NAS
|
||||||
@ -574,16 +574,16 @@ caption figure 1
|
|||||||
title My super title
|
title My super title
|
||||||
|
|
||||||
* <&flag>Debian
|
* <&flag>Debian
|
||||||
** <&globe>Ubuntu
|
**<&globe>Ubuntu
|
||||||
*** Linux Mint
|
***Linux Mint
|
||||||
*** Kubuntu
|
*** Kubuntu
|
||||||
*** Lubuntu
|
***Lubuntu
|
||||||
*** KDE Neon
|
*** KDE Neon
|
||||||
** <&graph>LMDE
|
** <&graph>LMDE
|
||||||
** <&pulse>SolydXK
|
**<&pulse>SolydXK
|
||||||
** <&people>SteamOS
|
** <&people>SteamOS
|
||||||
** <&star>Raspbian with a very long name
|
** <&star>Raspbian with a very long name
|
||||||
*** <s>Raspmbc</s> => OSMC
|
***<s>Raspmbc</s> => OSMC
|
||||||
*** <s>Raspyfi</s> => Volumio
|
*** <s>Raspyfi</s> => Volumio
|
||||||
|
|
||||||
header
|
header
|
||||||
@ -630,9 +630,9 @@ endlegend
|
|||||||
|
|
||||||
```md
|
```md
|
||||||
@startjson
|
@startjson
|
||||||
#highlight "lastName"
|
# highlight "lastName"
|
||||||
#highlight "address" / "city"
|
# highlight "address" / "city"
|
||||||
#highlight "phoneNumbers" / "0" / "number"
|
# highlight "phoneNumbers" / "0" / "number"
|
||||||
{
|
{
|
||||||
"firstName": "John",
|
"firstName": "John",
|
||||||
"lastName": "Smith",
|
"lastName": "Smith",
|
||||||
|
|||||||
@ -48,7 +48,7 @@ export default defineUserConfig({
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```ts:line-numbers
|
```ts:line-numbers
|
||||||
// 启用行号
|
// 启用行号
|
||||||
const line2 = 'This is line 2'
|
const line2 = 'This is line 2'
|
||||||
@ -94,7 +94,7 @@ const line4 = 'This is line 4'
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```js{4}
|
```js{4}
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
@ -126,7 +126,7 @@ export default {
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```js{1,4,6-8}
|
```js{1,4,6-8}
|
||||||
export default { // Highlighted
|
export default { // Highlighted
|
||||||
data () {
|
data () {
|
||||||
@ -162,10 +162,10 @@ export default { // Highlighted
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
msg: 'Highlighted!' // [\!code highlight]
|
msg: 'Highlighted!' // [\!code highlight]
|
||||||
}
|
}
|
||||||
@ -194,10 +194,10 @@ export default {
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
msg: 'Focused!' // [\!code focus]
|
msg: 'Focused!' // [\!code focus]
|
||||||
}
|
}
|
||||||
@ -241,10 +241,10 @@ pnpm install
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
error: 'Removed', // [\!code --]
|
error: 'Removed', // [\!code --]
|
||||||
warning: 'Added' // [\!code ++]
|
warning: 'Added' // [\!code ++]
|
||||||
@ -288,10 +288,10 @@ mkdir hello && cd hello # [!code ++]
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
error: 'Error', // [\!code error]
|
error: 'Error', // [\!code error]
|
||||||
warning: 'Warning' // [\!code warning]
|
warning: 'Warning' // [\!code warning]
|
||||||
@ -333,7 +333,7 @@ mkdir hello && cd hello # [!code warning]
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```ts
|
```ts
|
||||||
export function foo() { // [\!code word:Hello]
|
export function foo() { // [\!code word:Hello]
|
||||||
const msg = 'Hello World'
|
const msg = 'Hello World'
|
||||||
@ -355,7 +355,7 @@ export function foo() { // [!code word:Hello]
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
```ts
|
```ts
|
||||||
// [\!code word:options:2]
|
// [\!code word:options:2]
|
||||||
const options = { foo: 'bar' }
|
const options = { foo: 'bar' }
|
||||||
|
|||||||
@ -59,7 +59,7 @@ permalink: /guide/components/card-masonry/
|
|||||||
``` md
|
``` md
|
||||||
::: card-masonry cols="3" gap="16" <!-- [!code hl]-->
|
::: card-masonry cols="3" gap="16" <!-- [!code hl]-->
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
<!-- 更多内容 -->
|
<!-- 更多内容 -->
|
||||||
|
|
||||||
@ -77,17 +77,19 @@ permalink: /guide/components/card-masonry/
|
|||||||
``` md
|
``` md
|
||||||
::: card-masonry
|
::: card-masonry
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||

|

|
||||||
|
|
||||||

|

|
||||||
|
|
||||||

|

|
||||||
|
|
||||||

|

|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
:::
|
:::
|
||||||
```
|
```
|
||||||
|
|||||||
@ -36,11 +36,11 @@ export default defineUserConfig({
|
|||||||
可以通过 `no-view` 或 `ignore` 类名,或者 `no-view` 属性来忽略图片预览。
|
可以通过 `no-view` 或 `ignore` 类名,或者 `no-view` 属性来忽略图片预览。
|
||||||
|
|
||||||
```md
|
```md
|
||||||
{.no-view}
|
{.no-view}
|
||||||
{.ignore}
|
{.ignore}
|
||||||
{no-view}
|
{no-view}
|
||||||
|
|
||||||
<img src="path/to/image" class="no-view">
|
<img src="path/to/image" class="no-view" alt="alt text">
|
||||||
<img src="path/to/image" class="ignore">
|
<img src="path/to/image" class="ignore" alt="alt text">
|
||||||
<img src="path/to/image" no-view>
|
<img src="path/to/image" no-view alt="alt text">
|
||||||
```
|
```
|
||||||
|
|||||||
@ -89,7 +89,7 @@ export default defineUserConfig({
|
|||||||
```md
|
```md
|
||||||

|

|
||||||
|
|
||||||
<img src="/images/foo.jpg">
|
<img src="/images/foo.jpg" alt="foo">
|
||||||
```
|
```
|
||||||
|
|
||||||
在 `javascript` 中:
|
在 `javascript` 中:
|
||||||
|
|||||||
@ -411,7 +411,7 @@ end tell
|
|||||||
在代码块里面, `&` 、 `<` 和 `>` 会自动转成 HTML 实体,这样的方式让你非常容易使用 Markdown 插入范例用的 HTML 原始码,只需要复制粘贴,再加上缩进就可以了,剩下的 Markdown 都会帮你处理,例如:
|
在代码块里面, `&` 、 `<` 和 `>` 会自动转成 HTML 实体,这样的方式让你非常容易使用 Markdown 插入范例用的 HTML 原始码,只需要复制粘贴,再加上缩进就可以了,剩下的 Markdown 都会帮你处理,例如:
|
||||||
|
|
||||||
````md
|
````md
|
||||||
```
|
```html
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
© 2004 Foo Corporation
|
© 2004 Foo Corporation
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -389,7 +389,7 @@ Fontawesome 的免费图标仅支持 `solid` 、部分 `regular` 以及 `brands`
|
|||||||
|
|
||||||
[为 Fontawesome 添加更多样式支持](https://docs.fontawesome.com/web/style/styling){.read-more}
|
[为 Fontawesome 添加更多样式支持](https://docs.fontawesome.com/web/style/styling){.read-more}
|
||||||
|
|
||||||
```
|
```md
|
||||||
::circle-user 2xl:: <!-- 2xl 为 fa-2xl 的缩写, 图标大小为 2em -->
|
::circle-user 2xl:: <!-- 2xl 为 fa-2xl 的缩写, 图标大小为 2em -->
|
||||||
::circle-user rotate-90:: <!-- 图标旋转 90 度 -->
|
::circle-user rotate-90:: <!-- 图标旋转 90 度 -->
|
||||||
::circle-user beat:: <!-- 图标动画 -->
|
::circle-user beat:: <!-- 图标动画 -->
|
||||||
|
|||||||
@ -83,7 +83,7 @@ interface PlotOptions {
|
|||||||
|
|
||||||
在 Frontmatter 中使用 `plot` 选项来控制在当前页面中该功能的默认行为:
|
在 Frontmatter 中使用 `plot` 选项来控制在当前页面中该功能的默认行为:
|
||||||
|
|
||||||
```
|
```md
|
||||||
---
|
---
|
||||||
plot:
|
plot:
|
||||||
trigger: hover
|
trigger: hover
|
||||||
|
|||||||
@ -77,7 +77,7 @@ permalink: /guide/markdown/tabs/
|
|||||||
|
|
||||||
**输入:**
|
**输入:**
|
||||||
|
|
||||||
````
|
````md
|
||||||
::: tabs
|
::: tabs
|
||||||
@tab npm
|
@tab npm
|
||||||
|
|
||||||
|
|||||||
@ -522,7 +522,8 @@ export default defineComponent({
|
|||||||
/* css 代码 */
|
/* css 代码 */
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
```
|
````
|
||||||
|
|
||||||
::::
|
::::
|
||||||
|
|
||||||
还可以在 `::: demo` 中包裹 `::: code-tabs` 以获得更好的代码块展示效果:
|
还可以在 `::: demo` 中包裹 `::: code-tabs` 以获得更好的代码块展示效果:
|
||||||
@ -552,7 +553,8 @@ export default defineComponent({
|
|||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
::::
|
::::
|
||||||
```
|
````
|
||||||
|
|
||||||
:::::
|
:::::
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|||||||
@ -35,4 +35,24 @@ export default config({
|
|||||||
'eslint-comments/no-unlimited-disable': 'off',
|
'eslint-comments/no-unlimited-disable': 'off',
|
||||||
'antfu/no-top-level-await': 'off',
|
'antfu/no-top-level-await': 'off',
|
||||||
},
|
},
|
||||||
|
}, {
|
||||||
|
files: [
|
||||||
|
'docs/blog/1.示例/markdown基础.md',
|
||||||
|
'docs/blog/4.教程/frontmatter.md',
|
||||||
|
'docs/en/guide/markdown/basic.md',
|
||||||
|
'docs/en/guide/chart/plantuml.md',
|
||||||
|
'docs/en/blog/4.Tutorials/frontmatter.md',
|
||||||
|
'docs/en/guide/markdown/env.md',
|
||||||
|
'docs/guide/chart/plantuml.md',
|
||||||
|
'docs/guide/markdown/annotation.md',
|
||||||
|
'docs/guide/markdown/basic.md',
|
||||||
|
'docs/guide/markdown/env.md',
|
||||||
|
].map(file => [file, `${file}/*.md`]).flat(),
|
||||||
|
rules: {
|
||||||
|
'markdown/no-unused-definitions': 'off',
|
||||||
|
'markdown/no-duplicate-definitions': 'off',
|
||||||
|
'markdown/no-multiple-h1': 'off',
|
||||||
|
'markdown/no-space-in-emphasis': 'off',
|
||||||
|
'markdown/no-missing-atx-heading-space': 'off',
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@ -18,7 +18,7 @@
|
|||||||
当在项目中启用了 `twoslash` 功能,并额外安装了 `@vuepress/shiki-twoslash` 包,在项目进行 `vuepress build` 构建部署包并部署后。
|
当在项目中启用了 `twoslash` 功能,并额外安装了 `@vuepress/shiki-twoslash` 包,在项目进行 `vuepress build` 构建部署包并部署后。
|
||||||
访问部署后的站点,在有使用 `twoslash` 功能的相关页面,会出现下面的错误信息:
|
访问部署后的站点,在有使用 `twoslash` 功能的相关页面,会出现下面的错误信息:
|
||||||
|
|
||||||
```
|
```txt
|
||||||
hydration mismatch
|
hydration mismatch
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user