跳至主要內容

Markdown 基本使用

zedo2022/1/22markdownmarkdown大约 3 分钟约 1040 字

Markdown 基本使用

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

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

相关信息

相关信息

二号标题

三号标题

四号标题

数学公式

Vuepress 中的特殊用法

导入代码

<template>
    <p v-show="disabled" style="color: red; font-weight: bold">
        抱歉，当前浏览器不支持语音合成API。
    </p>
    <div>
        <label>语言：</label>
        <select :disabled="disabled" v-model="currentLang">
            <option selected value="all">全部</option>
            <option v-for="(lang, idx) in getSupportedLang()" :key="idx" :value="lang">
                {{ lang }}
            </option>
        </select>
    </div>
    <div>
        <label>音色：</label>
        <select :disabled="disabled" v-model="speakerIdx">
            <option v-for="(voice, idx) in filterVoicesByLang(currentLang)" :key="idx" :value="idx">
                {{ voice.name }}
            </option>
            <option v-if="filterVoicesByLang(currentLang).length === 0" disabled>没有可选项</option>
        </select>
    </div>
    <div>
        <label>语速：</label>
        <input type="number" min="0" max="10" step="0.2" v-model="rate" :disabled="disabled" />
        <label>音调：</label>
        <input type="number" min="0" max="2" step="0.1" v-model="pitch" :disabled="disabled" />
    </div>
    <textarea v-model="textInput" />
    <div style="text-align: left">
        <button type="button" @click="speak()" :disabled="disabled">朗读</button>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";

// 是否支持语音合成
const disabled = ref(false);

// 用户相关输入变量
const currentLang = ref<string>("all");
const speakerIdx = ref(0);
const textInput = ref("hello, 你好");
const rate = ref(1.2); // 0 - 10
const pitch = ref(1.2); // 0 - 2

// 语音辅助变量
const allVoices = ref<SpeechSynthesisVoice[]>([]);
const currentVoices = ref<SpeechSynthesisVoice[]>([]);

onMounted(() => {
    // 判断浏览器是否支持
    if (!window.speechSynthesis) {
        disabled.value = true;
    } else {
        const loadVoices = () => {
            let voices = speechSynthesis.getVoices();
            // 利用map之key的唯一性，对 voiceURI 去重
            let map = new Map();
            allVoices.value = voices.filter((v) => !map.has(v.voiceURI) && map.set(v.voiceURI, 1));
            let length = allVoices.value.length;
            if (length > 0) {
                console.log(`成功加载 ${length} 个语音`);
            }
            currentVoices.value = allVoices.value;
        };
        loadVoices();
        // 异步获取语音 https://stackoverflow.com/questions/46863170
        window.speechSynthesis.onvoiceschanged = () => {
            loadVoices();
        };
    }
});

// 改变语言时，重置 朗读者 索引、过滤语音列表
watch(currentLang, (newVal) => {
    currentVoices.value = filterVoicesByLang(newVal);
    speakerIdx.value = 0;
});

function speak(text?: string) {
    let utter = new SpeechSynthesisUtterance();
    utter.text = text ? text : textInput.value;
    utter.rate = rate.value;
    utter.pitch = pitch.value;
    if (currentVoices.value.length > 0) {
        utter.voice = currentVoices.value[speakerIdx.value];
        utter.lang = utter.voice.lang;
    }
    speechSynthesis.speak(utter);
}

function getSupportedLang(voices?: SpeechSynthesisVoice[]): string[] {
    let lang: string[] = [];
    if (!voices) voices = allVoices.value;
    voices.forEach((v) => lang.push(v.lang.trim()));
    // 使用 集合 进行去重
    return [...new Set(lang.sort())];
}

function filterVoicesByLang(lang: string, voices?: SpeechSynthesisVoice[]) {
    if (lang == "all") return allVoices.value;
    if (!voices) voices = allVoices.value;
    return voices.filter((v) => v.lang.trim().toLowerCase() == lang.trim().toLowerCase());
}
</script>

<style scoped>
textarea {
    width: 100%;
    height: 4.4rem;
    font-size: 1rem;
    font-family: inherit;
}
</style>
linux
mkdir 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 \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;
}
```

:::
一个 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>
```

:::

点击查看

  • 列表 1
  • 列表 2

自定义标题

提示容器

自定义标题

警告容器

自定义标题

危险容器

自定义标题

详情容器

代码
::: 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 解析器对空行行为的差异，使用 \; 充当空行，增加“可读性”。

流程图

  1. 这是脚注内容 ↩︎

编辑此页
最近更新:
贡献者: Trezedo,zedo