md增强
md增强
选项卡
Code
::: tabs
@tab apple
Apple
@tab banana
Banana
@tab:active orange
Orange
:::
Apple
let a = Apple;
Banana
Orange
代码块选项卡
- 代码选项卡只会渲染
@tab标记后的代码块，其他Markdown内容将被忽略。
链接
Code
::: code-tabs
@tab apple
apple
```bash
代码块里的Apple
```
@tab banana
banana
```bash
代码块里的banana
```
@tab:active orange
orange
```html
代码块里的orange
```
:::
代码块里的Apple
代码块里的banana
代码块里的orange
代码演示(单文件)
normal-demo
<h1>VuePress Theme Hope</h1>
<p><span id="very">非常</span>强大!</p>
document.querySelector("#very").addEventListener("click", () => {
alert("非常强大");
});
span {
color: red;
}
Code
::: normal-demo Demo 演示
```html
<h1>测试普通js</h1>
<p><span id="very">非常</span>强大!</p>
```
```js
document.querySelector("#very").addEventListener("click", () => {
alert("非常强大");
});
```
```css
span {
color: red;
}
```
:::
vue-demo
<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>
Code
::: vue-demo 一个Vue3单文件演示
```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>
```
:::
<template>
<div class="box">
<code>vuepress-theme-hope</code> is
<span @click="handler">{{ message }}</span
>!
</div>
</template>
<script>
export default {
data: () => ({ message: "powerful" }),
methods: {
handler() {
this.message = "very " + this.message;
},
},
};
</script>
<style>
.box span {
color: red;
}
</style>
Code
::: vue-demo 一个 Vue2单文件 演示
```vue
<template>
<div class="box">
<code>vuepress-theme-hope</code> is
<span @click="handler">{{ message }}</span
>!
</div>
</template>
<script>
export default {
data: () => ({ message: "powerful" }),
methods: {
handler() {
this.message = "very " + this.message;
},
},
};
</script>
<style>
.box span {
color: red;
}
</style>
```
:::
vue交互演示
Code
::: vue-playground vue3案例
@file App.vue
```vue
<template>
<div>人信息：{{ person }}</div>
<div>计算属性：{{ nameAndAge }}</div>
<div>计算属性(完整)：{{ nameAndAgeComplete }}</div>
<button @click="person.age += 1">修改小明的年龄</button>
<button @click="editAge">修改nameAndAgeComplete</button>
</template>
<script>
import { reactive, computed } from "vue";
export default {
name: "App",
setup() {
let person = reactive({
name: "小明",
age: 23,
});
// 简写
let nameAndAge = computed(() => {
return person.name + person.age + "岁了";
});
// 完整写法
let nameAndAgeComplete = computed({
get() {
return person.name + person.age + "岁了(完整写法)";
},
set(value) {
console.log("**nameAndAgeComplete被修改了**", value);
person.age = value;
},
});
function editAge() {
// 计算属性也需要添加value
nameAndAgeComplete.value = 1111;
}
return {
person,
nameAndAge,
nameAndAgeComplete,
editAge,
};
},
};
</script>
```
:::
交互演示
Code
::: playground#vue Vue 案例
@file App.vue
```vue
<script setup>
import { ref } from "vue";
import Comp from "./Comp.vue";
const msg = ref("Hello World!");
</script>
<template>
<h1>{{ msg }}</h1>
<input v-model="msg" />
<Comp />
</template>
```
@file Comp.vue
```vue
<template>
<div>Comp</div>
</template>
```
@import
```json
{
"imports": {
"vue": "https://sfc.vuejs.org/vue.runtime.esm-browser.js"
}
}
```
:::
标记
使用方式：==要标记的==,eg:标记
样式化
注意：需要现在theme.js的mdEnhance中的stylize配置
使用方式：*样式化*
已配置的部分关键词：不要、注意、
正常的斜体 ---> 没有配置的字段
属性支持
使用方法
在想添加属性的后面添加{.className #id others="other"}
一个包含文字的段落。 {#p .a .b align=center customize-attr="content with spaces"}
会被渲染成
<p id="p" class="a b" align="center" customize-attr="content with spaces">
一个包含文字的段落。
</p>
测试自定义字体
测试自定义背景
自定义对齐
居中的文字
靠右的文字
Code
::: center
居中的文字
:::
::: right
靠右的文字
:::
自定义容器
默认
相关信息
信息容器。
注
注释容器。
提示
提示容器
注意
警告容器
警告
危险容器
详情
详情容器
自定义标题
一个有 代码 的信息容器。
const a = 1;
自定义标题
一个有 代码 的注释容器。
const a = 1;
自定义标题
一个有 代码 的提示容器。
const a = 1;
自定义标题
一个有 代码 的警告容器。
const a = 1;
自定义标题
一个有 代码 的危险容器。
const a = 1;
自定义标题
一个有 代码 的详情容器。
const a = 1;
自定义信息
自定义注释
自定义提示
自定义警告
自定义危险
Code
::: info
信息容器。
:::
::: note
注释容器。
:::
::: tip
提示容器
:::
::: warning
警告容器
:::
::: danger
危险容器
:::
::: details
详情容器
:::
::: info 自定义标题
一个有 `代码` 的信息容器。
```js
const a = 1;
```
:::
::: note 自定义标题
一个有 `代码` 的注释容器。
```js
const a = 1;
```
:::
::: tip 自定义标题
一个有 `代码` 的提示容器。
```js
const a = 1;
```
:::
::: warning 自定义标题
一个有 `代码` 的警告容器。
```js
const a = 1;
```
:::
::: danger 自定义标题
一个有 `代码` 的危险容器。
```js
const a = 1;
```
:::
::: details 自定义标题
一个有 `代码` 的详情容器。
```js
const a = 1;
```
:::
::: info 自定义信息
:::
::: note 自定义注释
:::
::: tip 自定义提示
:::
::: warning 自定义警告
:::
::: danger 自定义危险
:::
组件
type='heed'
代码块里的行高亮
- 注意：{}里不能出现空格
let a=1;
let a=1;
let a=1;
let a=1;
let a=1;
let a=1;
let a=1;
let a=1;
