跳至主要內容

Markdown 基本使用

zedo2022年1月22日Markdownmarkdown大约 3 分钟约 1048 字

Markdown 基本使用

markdown 基础可以参看：https://markdown.com.cn/open in new window

CurrentPageData.vue

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

相关信息

相关信息

二号标题

三号标题

四号标题

数学公式

Vuepress 中的特殊用法

导入代码

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

<script lang="ts" setup>
// https://github.com/vuepress/vuepress-next/pull/504
import {
    resolvers,
    usePageData,
    usePageFrontmatter,
    usePagesData,
    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>

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

提示

这是一个提示

注意

这是一个警告

警告

这是一个危险警告

详情

这是一个 details 标签

使用 Vue SFC

使用 $page

{{ $page }}

输出：

查看输出结果
{
  "key": "v-59835c59",
  "path": "/article/markdown-intro.html",
  "title": "Markdown 基本使用",
  "lang": "zh-CN",
  "frontmatter": {
    "icon": "markdown",
    "slug": "markdown-intro",
    "date": "2022-01-22T00:00:00.000Z",
    "permalink": "/article/markdown-intro.html",
    "excerpt": "markdown 基本使用",
    "category": [
      "Markdown"
    ],
    "tag": [
      "markdown"
    ],
    "description": "markdown 基础可以参看： 简单介绍 Markdown 的基本使用以及在 VuePress 中的拓展 相关信息 相关信息 二号标题 三号标题 四号标题 数学公式 $$ \\frac 12 \\int_a^b f(x)dx $$ Vuepress 中的特殊用法 导入代码 code vue (../../custom/components/client/...",
    "head": [
      [
        "meta",
        {
          "property": "og:url",
          "content": "https://zedo.netlify.app/article/markdown-intro.html"
        }
      ],
      [
        "meta",
        {
          "property": "og:site_name",
          "content": "zedo"
        }
      ],
      [
        "meta",
        {
          "property": "og:title",
          "content": "Markdown 基本使用"
        }
      ],
      [
        "meta",
        {
          "property": "og:description",
          "content": "markdown 基础可以参看： 简单介绍 Markdown 的基本使用以及在 VuePress 中的拓展 相关信息 相关信息 二号标题 三号标题 四号标题 数学公式 $$ \\frac 12 \\int_a^b f(x)dx $$ Vuepress 中的特殊用法 导入代码 code vue (../../custom/components/client/..."
        }
      ],
      [
        "meta",
        {
          "property": "og:type",
          "content": "article"
        }
      ],
      [
        "meta",
        {
          "property": "og:locale",
          "content": "zh-CN"
        }
      ],
      [
        "meta",
        {
          "property": "og:updated_time",
          "content": "2023-04-22T10:34:11.000Z"
        }
      ],
      [
        "meta",
        {
          "property": "article:author",
          "content": "zedo"
        }
      ],
      [
        "meta",
        {
          "property": "article:tag",
          "content": "markdown"
        }
      ],
      [
        "meta",
        {
          "property": "article:published_time",
          "content": "2022-01-22T00:00:00.000Z"
        }
      ],
      [
        "meta",
        {
          "property": "article:modified_time",
          "content": "2023-04-22T10:34:11.000Z"
        }
      ],
      [
        "script",
        {
          "type": "application/ld+json"
        },
        "{\"@context\":\"https://schema.org\",\"@type\":\"Article\",\"headline\":\"Markdown 基本使用\",\"image\":[\"\"],\"datePublished\":\"2022-01-22T00:00:00.000Z\",\"dateModified\":\"2023-04-22T10:34:11.000Z\",\"author\":[{\"@type\":\"Person\",\"name\":\"zedo\",\"url\":\"https://zedo.netlify.app\"}]}"
      ]
    ]
  },
  "headers": [
    {
      "level": 2,
      "title": "二号标题",
      "slug": "二号标题",
      "link": "#二号标题",
      "children": [
        {
          "level": 3,
          "title": "三号标题",
          "slug": "三号标题",
          "link": "#三号标题",
          "children": []
        },
        {
          "level": 3,
          "title": "数学公式",
          "slug": "数学公式",
          "link": "#数学公式",
          "children": []
        }
      ]
    },
    {
      "level": 2,
      "title": "Vuepress 中的特殊用法",
      "slug": "vuepress-中的特殊用法",
      "link": "#vuepress-中的特殊用法",
      "children": [
        {
          "level": 3,
          "title": "导入代码",
          "slug": "导入代码",
          "link": "#导入代码",
          "children": []
        }
      ]
    },
    {
      "level": 2,
      "title": "使用 Vue SFC",
      "slug": "使用-vue-sfc",
      "link": "#使用-vue-sfc",
      "children": [
        {
          "level": 3,
          "title": "使用 $page",
          "slug": "使用-page",
          "link": "#使用-page",
          "children": []
        }
      ]
    },
    {
      "level": 2,
      "title": "一键启用",
      "slug": "一键启用",
      "link": "#一键启用",
      "children": []
    },
    {
      "level": 2,
      "title": "其他语法",
      "slug": "其他语法",
      "link": "#其他语法",
      "children": [
        {
          "level": 3,
          "title": "脚注",
          "slug": "脚注",
          "link": "#脚注",
          "children": []
        },
        {
          "level": 3,
          "title": "Tex 语法",
          "slug": "tex-语法",
          "link": "#tex-语法",
          "children": []
        },
        {
          "level": 3,
          "title": "代码案例",
          "slug": "代码案例",
          "link": "#代码案例",
          "children": []
        },
        {
          "level": 3,
          "title": "使用 gravizo",
          "slug": "使用-gravizo",
          "link": "#使用-gravizo",
          "children": []
        },
        {
          "level": 3,
          "title": "流程图",
          "slug": "流程图",
          "link": "#流程图",
          "children": []
        }
      ]
    }
  ],
  "git": {
    "createdTime": 1647332688000,
    "updatedTime": 1682159651000,
    "contributors": [
      {
        "name": "zedo",
        "email": "1962234583@qq.com",
        "commits": 9
      },
      {
        "name": "Trezedo",
        "email": "1962234583@qq.com",
        "commits": 3
      }
    ]
  },
  "readingTime": {
    "minutes": 3.49,
    "words": 1048
  },
  "filePathRelative": "article/markdown基本使用.md",
  "localizedDate": "2022年1月22日",
  "copyright": {
    "author": "Trezedo",
    "license": "MIT"
  },
  "autoDesc": true
}

使用 $frontmatter

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

输入：

{{ $frontmatter }}
查看输出结果
{
  "icon": "markdown",
  "slug": "markdown-intro",
  "date": "2022-01-22T00:00:00.000Z",
  "permalink": "/article/markdown-intro.html",
  "excerpt": "markdown 基本使用",
  "category": [
    "Markdown"
  ],
  "tag": [
    "markdown"
  ],
  "description": "markdown 基础可以参看： 简单介绍 Markdown 的基本使用以及在 VuePress 中的拓展 相关信息 相关信息 二号标题 三号标题 四号标题 数学公式 $$ \\frac 12 \\int_a^b f(x)dx $$ Vuepress 中的特殊用法 导入代码 code vue (../../custom/components/client/...",
  "head": [
    [
      "meta",
      {
        "property": "og:url",
        "content": "https://zedo.netlify.app/article/markdown-intro.html"
      }
    ],
    [
      "meta",
      {
        "property": "og:site_name",
        "content": "zedo"
      }
    ],
    [
      "meta",
      {
        "property": "og:title",
        "content": "Markdown 基本使用"
      }
    ],
    [
      "meta",
      {
        "property": "og:description",
        "content": "markdown 基础可以参看： 简单介绍 Markdown 的基本使用以及在 VuePress 中的拓展 相关信息 相关信息 二号标题 三号标题 四号标题 数学公式 $$ \\frac 12 \\int_a^b f(x)dx $$ Vuepress 中的特殊用法 导入代码 code vue (../../custom/components/client/..."
      }
    ],
    [
      "meta",
      {
        "property": "og:type",
        "content": "article"
      }
    ],
    [
      "meta",
      {
        "property": "og:locale",
        "content": "zh-CN"
      }
    ],
    [
      "meta",
      {
        "property": "og:updated_time",
        "content": "2023-04-22T10:34:11.000Z"
      }
    ],
    [
      "meta",
      {
        "property": "article:author",
        "content": "zedo"
      }
    ],
    [
      "meta",
      {
        "property": "article:tag",
        "content": "markdown"
      }
    ],
    [
      "meta",
      {
        "property": "article:published_time",
        "content": "2022-01-22T00:00:00.000Z"
      }
    ],
    [
      "meta",
      {
        "property": "article:modified_time",
        "content": "2023-04-22T10:34:11.000Z"
      }
    ],
    [
      "script",
      {
        "type": "application/ld+json"
      },
      "{\"@context\":\"https://schema.org\",\"@type\":\"Article\",\"headline\":\"Markdown 基本使用\",\"image\":[\"\"],\"datePublished\":\"2022-01-22T00:00:00.000Z\",\"dateModified\":\"2023-04-22T10:34:11.000Z\",\"author\":[{\"@type\":\"Person\",\"name\":\"zedo\",\"url\":\"https://zedo.netlify.app\"}]}"
    ]
  ]
}

一键启用

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

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


 
 
 


其他语法

脚注

此文字有脚注[1].

代码
此文字有脚注[^first].

[^first]: 这是脚注内容

Tex 语法

代码
$$
\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\}
$$

点击查看open in new window

代码案例

<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;
}
```

:::
一个 React Demo
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>
一个 Vue Composition 演示
<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>
```

:::

点击查看open in new window

自定义标题

提示容器

自定义标题

警告容器

自定义标题

危险容器

自定义标题

详情容器

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

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

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

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

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

使用 gravizo

使用 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 演示
<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;
 }"
/>
gravizo uml 演示
<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 解析器对空行行为的差异，使用 \; 充当空行，增加“可读性”。

流程图

Created with Raphaël 2.3.0接收到消息读取信息更新缓存处理结束
Created with Raphaël 2.3.0StartYour OperationYes or No?yesno

  1. 这是脚注内容 ↩︎

2023-9-14 更新
重启 search-pro，css 样式调整