Skip to main content

Get Started

Less than 1 minute

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 docsopen in new window 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.

  • 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

Superscript and Subscript

19th H2O

Task List

Tex

rωr(yωω)=(yωω){(logy)r+i=1r(1)ir(ri+1)(logy)riωi}

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

Footnote

This text has footnote[1].

Include files

Presentation

Tabs

apple

Apple

Stylize

This plugin provides the following features to stylize your content:

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

GFM alert

Warning

Be careful!

Align

I am center

I am right align

Hint box

Tips

This is a tip

Attrs

A word having id.

Mark

You can mark important words.

Stylize

Donate Mr.Hope a cup of coffee. Recommended

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.

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

Chart.js

A Scatter Chart

Echarts

A line chart

Flowchart

Markmap

Mermaid

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

Code Tabs

npm
npm i -D vuepress-plugin-md-enhance

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;
}

Playground

TS demo

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)
}

Vue Playground

Vue Playground

Sandpack

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

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

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


  1. This is footnote content ↩︎