Get Started

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

Note

VuePress itself also adds some Markdown syntaxes. You can view the official documentation.

Tips

Don't worry about the size of your site. The final output will only include codes of features you enabled.

Grammar

This plugin introduce the following new grammar to Markdown.

• Image: Covert to figure, switched with color scheme and setting size
• Superscript and Subscript
• Tasklist
• TeX: Support KaTeX and Mathjax

Image Enhancement

Support setting title, color scheme and size

• View Detail

Superscript and Subscript

19^th H₂O

• View Detail

Task List

• Plan A

• Plan B

• 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

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
• Slideshow: Show content

component

Mr.Hope

---

Where there is light, there is hope

• View Detail

Footnote

This text has footnote^[1].

• View Detail

Include files

• View Detail

Presentation

• View Detail

Tabs

apple

Apple

banana

Banana

orange

Orange

• View Detail

Stylize

This plugin provides the following features to stylize your content:

• Align: Customize content alignment
• Container: Wrap contents in different types of hint box
• Attrs: Adding attrs to markdown contents
• Mark: Highlight contents
• Stylize: Customizable token stylizer

Align

I am center

I am right align

• View Detail

Container

Tips

This is a tip

• 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 4 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.

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

  Powerful collection of common charts.

Chart.js

A Scatter Chart

• View Detail

Echarts

A line chart

• View Detail

Flowchart

• View Detail

Mermaid

• View Detail

Coding

This plugin 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.
• Vue Playground: Reactive vue playground.

Code Tabs

pnpm

pnpm add -D vuepress-plugin-md-enhance

yarn

yarn add -D vuepress-plugin-md-enhance

npm

npm i -D vuepress-plugin-md-enhance

• 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

Vue Playground

Vue Playground

• View Detail

---

1. This is footnote content ↩︎