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.

Info

Frontmatter is a 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.

Hint box

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

• View Detail

Tabs

::: tabs#fruit

@tab apple

Apple

@tab banana

Banana

@tab orange

Orange

:::

• View Detail

Code Tabs

::: code-tabs#shell

@tab pnpm

pnpm add -D vuepress-theme-hope

@tab yarn

yarn add -D vuepress-theme-hope

@tab:active npm

npm i -D vuepress-theme-hope

:::

• View Detail

Superscript and Subscript

19^th^ H~2~O

• View Detail

Align

::: center

I am center

:::

::: right

I am right align

:::

• View Detail

Attrs

A word{#word} having id.

• View Detail

Footnote

This text has footnote[^first].

[^first]: This is footnote content

• View Detail

Mark

You can mark ==important words== .

• View Detail

Tasklist

• [x] Plan A

• [ ] Plan B

• View Detail

Image Enhancement

Support setting color scheme and size

• View Detail

Component

title: Mr.Hope
desc: Where there is light, there is hope
logo: https://mister-hope.com/logo.svg
link: https://mister-hope.com
color: rgba(253, 230, 138, 0.15)

• View Detail

Include files

• View Detail

Code Demo

::: normal-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

Stylize

Donate Mr.Hope a cup of coffee. Recommended

• View Detail

Playground

::: playground#ts TS demo

@file index.ts

const msg = "hello world";

const speak = (msg: string) => console.log(msg);

speak(msg);

:::

• View Detail

Chart

::: chart A Scatter Chart

{
  "type": "scatter",
  "data": {
    "datasets": [
      {
        "label": "Scatter Dataset",
        "data": [
          { "x": -10, "y": 0 },
          { "x": 0, "y": 10 },
          { "x": 10, "y": 5 },
          { "x": 0.5, "y": 5.5 }
        ],
        "backgroundColor": "rgb(255, 99, 132)"
      }
    ]
  },
  "options": {
    "scales": {
      "x": {
        "type": "linear",
        "position": "bottom"
      }
    }
  }
}

:::

• View Detail

Echarts

::: echarts A line chart

{
  "xAxis": {
    "type": "category",
    "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  "yAxis": {
    "type": "value"
  },
  "series": [
    {
      "data": [150, 230, 224, 218, 135, 147, 260],
      "type": "line"
    }
  ]
}

:::

• View Detail

Flowchart

cond=>condition: Process?
process=>operation: Process
e=>end: End

cond(yes)->process->e
cond(no)->e

• View Detail

Mermaid

---
title: Flowchart
---
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2

• View Detail

Tex

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

• View Detail

Vue Playground

::: vue-playground Vue Playground

@file App.vue

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

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

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

:::

• View Detail

Presentation

@slidestart

Slide 1

A paragraph with some text and a link

---

Slide 2

• Item 1
• Item 2

---

Slide 3.1

const a = 1;

--

Slide 3.2

$$ J(\theta_0,\theta_1) = \sum_{i=0} $$

@slideend

• View Detail