Get Started

By installing and enabling this plugin, you can use more syntax in your Markdown files.

Built-in enhancements by VuePress

VuePress itself adds additional Markdown features. See official docs for more information.

Tree shaking

Output will only include codes of features you enabled, so no need to worry about the size.

Coding

This plugin provides the following features to enhance coding:

• Code Demo: Display and run code snippets in browser.
• Playground: Embed external playground site.
• Kotlin Playground: Reactive kotlin playground.
• Vue Playground: Reactive vue playground.

Code Demo

A normal demo

<h1>VuePress Theme Hope</h1>
<p>Is <span id="very">very</span> powerful!</p>

document.querySelector("#very").addEventListener("click", () => {
  alert("Very powerful!");
});

span {
  color: red;
}

• View Detail

Playground

TS demo

• View Detail

Kotlin Playground

Kotlin Playground

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

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

• View Detail

Vue Playground

Vue Playground

• View Detail

Sandpack

Vue Playground

• View Detail