Code

The theme provides the following features to enhance coding:

• Code Tabs: Add tabs to your code block.
• Code Demo: Display and run code snippets in browser.
• Playground: Embed external playground site.
• Kotlin Playground: Reactive kotlin playground.
• Vue Playground: Reactive vue playground.

Demo

Code Tabs

pnpm

pnpm add -D vuepress-theme-hope

yarn

yarn add -D vuepress-theme-hope

npm

npm i -D vuepress-theme-hope

• View Detail

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

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

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

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

Open Sandbox

• View Detail