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.

Grammar

This plugin introduce the following new grammar to Markdown.

• Superscript and Subscript
• Tasklist

Superscript and Subscript

19^th H₂O

• View Detail

Task List

• Plan A
• Plan B

View Detail

Content

This plugin provides the following ways to enrich your content.

• Component: quickly insert component in M.
• Footnotes: Supplementary explanation of key content
• Import files: Easily split or reuse files

component

Mr.Hope

---

Where there is light, there is hope

• View Detail

Footnote

This text has footnote^[1].

• View Detail

Include files

• View Detail

Stylize

This plugin provides the following features to stylize your content:

• Align: Customize content alignment
• Attrs: Adding attrs to markdown contents
• Mark: Highlight contents
• Spoiler: Hide spoiler content
• Stylize: Customizable token stylizer

Align

I am center

I am right align

• View Detail

Attrs

A word having id.

• View Detail

Mark

You can mark important words.

• View Detail

Stylize

Donate Mr.Hope a cup of coffee. Recommended

• View Detail

Charts

This plugin provides 6 ways to let you insert charts into your markdown file.

• Chart.js: A lightweight, easy-to-use, highly customizable chart library.

  Chart.js is lighter comparing to ECharts.

• ECharts: A powerful, interactive charting and visualization library for browser.

  ECharts is more powerful comparing to Chart.js.

• Flowchart: A simple markdown extension to generate flowcharts and sequence diagrams.

  Lightweight, only focusing on flowcharts.

• Markmap: Create mindmap with markdown

  The runtime is very heavy, not recommended.

• Mermaid: Generation of diagram and flowchart from text in a similar manner as markdown.

  Powerful collection of common charts.

• Plantuml: UML diagram driven by Java.

  No runtime.

Chart.js

A Scatter Chart

• View Detail

ECharts

A line chart

• View Detail

Flowchart

• View Detail

Markmap

• View Detail

Mermaid

• View Detail

Plantuml

• View Detail

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

<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

---

1. This is footnote content ↩︎