Markdown 基本使用

zedo2022/1/22大约 3 分钟约 1048 字

Markdown 基本使用

markdown 基础可以参看：https://markdown.com.cn/

CurrentPageData.vue

简单介绍 Markdown 的基本使用以及在 VuePress 中的拓展

二号标题

三号标题

四号标题

数学公式

\frac{1}{2} \int_{a}^{b} f (x) d x

Vuepress 中的特殊用法

导入代码

<template>
    <div>CurrentPageData.vue</div>
</template>

<script lang="ts" setup>
// https://github.com/vuepress/vuepress-next/pull/504
import {
    resolvers,
    usePageData,
    usePageFrontmatter,
    useRoutes,
    useRouteLocale,
    useSiteData,
} from "vuepress/client";
import { onMounted } from "vue";

onMounted(() => {
    console.log(useRouteLocale());
    console.log(usePageData().value);
    console.log(usePageFrontmatter().value);
    console.log(useSiteData().value);
});

// for (let valueKey in usePagesData().value) {
//     resolvers.resolvePageData(valueKey).then((pageData) => {
//         console.log(decodeURI(pageData.path));
//     });
// }

// 默认主题使用的 temp
// @ts-ignore
// import page from '@temp/pages'
</script>

linux

mkdir docs && echo '# Hello VitePress' > docs/index.md

windows

md docs && echo # Hello VitePress > docs/index.md

提示

这是一个提示

注意

这是一个警告

警告

这是一个危险警告

详情

这是一个 details 标签

使用 Vue SFC

使用 `$page`

{{ $page }}

输出：

查看输出结果

{{ $page }}

使用 `$frontmatter`

$frontmatter 是 $page.frontmatter 的引用缩写

输入：

{{ $frontmatter }}

查看输出结果

{{ $frontmatter }}

一键启用

你可以设置 plugins.mdEnhance.enableAll 启用 md-enhance 插件的所有功能。

module.exports = {
    themeConfig: {
        mdEnhance: {
            enableAll: true,
        },
    },
};

其他语法

脚注

此文字有脚注 ^[1].

代码

此文字有脚注[^first].

[^first]: 这是脚注内容

Tex 语法

\frac{\partial ^{r}}{\partial ω ^{r}} (\frac{y ^{ω}}{ω}) = (\frac{y ^{ω}}{ω}) {(lo g y)^{r} + i = 1 \sum r \frac{( - 1 ) ^{i} r \dots ( r - i + 1 ) ( lo g y ) ^{r - i}}{ω ^{i}}}

代码

$$
\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
= \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right\}
$$

点击查看

代码案例

<h1>Mr.Hope</h1>
<p><span id="very">十分</span> 帅</p>

document.querySelector("#very").addEventListener("click", () => {
    alert("十分帅");
});

span {
    color: red;
}

代码

::: normal-demo 一个普通 Demo

```html
<h1>Mr.Hope</h1>
<p><span id="very">十分</span> 帅</p>
```

```js
document.querySelector("#very").addEventListener("click", () => {
    alert("十分帅");
});
```

```css
span {
    color: red;
}
```

:::

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { message: "十分帅" };
    }
    render() {
        return (
            <div className="box-react">
                Mr.Hope <span>{this.state.message}</span>
            </div>
        );
    }
}

.box-react span {
    color: red;
}

代码

::: react-demo 一个 React Demo

```js
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { message: "十分帅" };
    }
    render() {
        return (
            <div className="box-react">
                Mr.Hope <span>{this.state.message}</span>
            </div>
        );
    }
}
```

```css
.box-react span {
    color: red;
}
```

:::

<template>
    <div class="box">
        Mr.Hope <span>{{ message }}</span>
    </div>
</template>
<script>
export default {
    data: () => ({ message: "十分帅" }),
};
</script>
<style>
.box span {
    color: red;
}
</style>

<template>
    <div class="box">
        <code>vuepress-theme-hope</code>
        is
        <span @click="handler"> {{ message }} </span>!
    </div>
</template>
<script>
const { ref } = Vue;

export default {
    setup() {
        const message = ref("powerful");

        const handler = () => {
            message.value = "very " + message.value;
        };

        return {
            message,
            handler,
        };
    },
};
</script>
<style>
.box span {
    color: red;
}
</style>

::: vue-demo 一个 Vue Composition 演示

```vue
<template>
    <div class="box">
        <code>vuepress-theme-hope</code>
        is
        <span @click="handler"> {{ message }} </span>!
    </div>
</template>
<script>
const { ref } = Vue;

export default {
    setup() {
        const message = ref("powerful");

        const handler = () => {
            message.value = "very " + message.value;
        };

        return {
            message,
            handler,
        };
    },
};
</script>
<style>
.box span {
    color: red;
}
</style>
```

:::

点击查看

列表 1
列表 2

自定义标题

提示容器

自定义标题

警告容器

自定义标题

危险容器

自定义标题

详情容器

代码

::: info 自定义标题
信息容器
:::

::: tip 自定义标题
提示容器
:::

::: warning 自定义标题
警告容器
:::

::: danger 自定义标题
危险容器
:::

::: details 自定义标题
详情容器
:::

使用 gravizo

<img
    src="https://g.gravizo.com/svg?
digraph G {
   main -> parse -> execute;
   main -> init;
   main -> cleanup;
   execute -> make_string;
   execute -> printf
   init -> make_string;
   main -> 是的;
   execute -> compare;
}"
/>

结果：

此外，还可以使用 embed、iframe 等嵌入。但如果不指定宽度，其在手机端会超过屏幕宽度。

<embed
    type="image/svg+xml"
    src="https://g.gravizo.com/svg?
 digraph G {
   main -> parse -> execute;
   main -> init;
   main -> cleanup;
   execute -> make_string;
   execute -> printf
   init -> make_string;
   main -> 是的;
   execute -> compare;
 }"
/>

<img
    src='https://g.gravizo.com/svg?
@startuml;
\;
actor User;
participant "First Class" as A;
participant "Second Class" as B;
participant "Last Class" as C;
\;
User -> A: DoWork;
activate A;
\;
A -> B: Create Request;
activate B;
\;
B -> C: DoWork;
activate C;
\;
C --> B: WorkDone;
destroy C;
\;
B --> A: Request Created;
deactivate B;
\;
A --> User: Done;
deactivate A;
\;
@enduml
'
/>

提示

gravizo 的 uml 画图本身是支持空行的，但此处为了避免不同 markdown 解析器对空行行为的差异，使用 \; 充当空行，增加“可读性”。

流程图

这是脚注内容 ↩︎