Markdown Enhance

VuePress basically generate pages from Markdown files. So you can use it to generate documentation or blog sites easily.

You should create and write Markdown files, so that VuePress can convert them to different pages according to file structure.

Markdown Introduction

If you are a new learner and don't know how to write Markdown, please read Markdown Intro and Markdown Demo.

Markdown Config

VuePress introduce configuration for each markdown page using Frontmatter.

Frontmatter

Frontmatter is an important concept in VuePress. If you don't know it, you need to read Frontmatter Introduction.

Markdown Extension

The Markdown content in VuePress will be parsed by markdown-it, which supports syntax extensions via markdown-it plugins.

VuePress Enhancement

To enrich document writing, VuePress has extended Markdown syntax.

For these extensions, please read Markdown extensions in VuePress.

Theme Enhancement

By using vuepress-plugin-md-enhance, the theme extends more Markdown syntax and provides richer writing functions.

Tabs

apple

Apple

banana

Banana

orange

Orange

• View Detail

Footnote

This text has footnote^[1].

• View Detail

Include files

• View Detail

Reveal.js

• View Detail

TeX

$$\frac{{\partial }^r}{\partial {\omega }^r}\left(\frac{y^{\omega }}{\omega }\right)=\left(\frac{y^{\omega }}{\omega }\right)\{(\log y{)}^r+\sum _{i=1}^r\frac{(-1{)}^{i}r\cdots (r-i+1)(\log y{)}^{r-i}}{{\omega }^i}\}$$

• View Detail

Tasklist

• Plan A
• Plan B

View Detail

Image Enhancement

Support setting color scheme and size.

• View Detail

Superscript and Subscript

19^th H₂O

• View Detail

Component

Mr.Hope

---

Where there is light, there is hope

• View Detail

Hint box and GFM alerts

Safely use {{ variable }} in Markdown.

Custom Title

A custom information container with code, link.

const a = 1;

Custom Title

A custom tip container

Custom Title

A custom warning container

Custom Title

A custom caution container

Custom Title

A custom details container

• GitHub Alert
• Hint boxes

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

Spoiler

VuePress Theme Hope is powerful.

• View Detail

Stylize

Donate Mr.Hope a cup of coffee. Recommended

• View Detail

Chart.js

A Scatter Chart

• View Detail

ECharts

A line chart

• View Detail

Flowchart

• View Detail

MarkMap

• View Detail

Mermaid

• View Detail

PlantUML

@startuml
Alice -> Bob: Authentication Request

alt successful case

Bob -> Alice: Authentication Accepted

else some kind of failure

Bob -> Alice: Authentication Failure
group My own label
Alice -> Log : Log attack start
    loop 1000 times
        Alice -> Bob: DNS Attack
    end
Alice -> Log : Log attack end
end

else Another type of failure

Bob -> Alice: Please repeat

end
@enduml

• View Detail

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

UnoCSS demo

• View Detail

Kotlin Playground

Simple 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 Playground

Vue Demo

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

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

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

Open Sandbox

• View Detail

---

1. This is footnote content ↩︎