代码

大约 1 分钟

主题提供以下功能来增强代码编写。

代码选项卡：为代码块添加选项卡。
代码演示：在浏览器中显示和运行代码片段。
交互演示：嵌入外部演示站点。
Kotlin 交互演示：响应式 Kotlin 演示。
Vue 交互演示：响应式 Vue 演示。

案例

代码选项卡

pnpm

pnpm add -D vuepress-plugin-md-enhance

yarn

yarn add -D vuepress-plugin-md-enhance

npm

npm i -D vuepress-plugin-md-enhance

查看详情

代码演示

一个普通 Demo

<h1>VuePress Theme Hope</h1>
<p><span id="very">非常</span>强大!</p>

document.querySelector("#very").addEventListener("click", () => {
  alert("非常强大");
});

span {
  color: red;
}

查看详情

交互演示

TS 案例

查看详情

Kotlin 交互演示

class Contact(val id: Int, var email: String)

fun main(args: Array<String>) {
    val contact = Contact(1, "mary@gmail.com")
    println(contact.id)
}

查看详情

Vue 交互演示

查看详情

Sandpack 交互演示

<script setup>
import { ref } from "vue";

const msg = ref("Hello World!");
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
</template>

Open Sandbox

查看详情