Skip to main content

Markdown Enhance

Mr.HopeAbout 3 minGuideMarkdown

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 Introopen in new window and Markdown Demoopen in new window.

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

Markdown Extension

The Markdown content in VuePress will be parsed by markdown-itopen in new window, which supports syntax extensionsopen in new window via markdown-it plugins.

VuePress Enhancement

To enrich document writing, VuePress has extended Markdown syntax.

For these extensions, please read Markdown extensions in VuePressopen in new window.

Theme Enhancement

By using vuepress-plugin-md-enhanceopen in new window, the theme extends more Markdown syntax and provides richer writing functions.

Custom Container

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 danger container

Custom Title

A custom details container

Tabs

apple

Apple

Code Tabs

npm
npm i -D vuepress-theme-hope

Superscript and Subscript

19th H2O

Align

I am center

I am right align

Attrs

A word having id.

Footnote

This text has footnote[^first].

[^first]: This is footnote content

Mark

You can mark important words .

Tasklist

Image Enhancement

Support setting color scheme and size

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)

Include files

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

Stylize

Donate Mr.Hope a cup of coffee. Recommended

Playground

TS demo

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

:::

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"
    }
  ]
}

:::

Flowchart

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

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

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

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

Vue Playground

::: vue-playground Vue Playground

Default footer
Copyright © 2023 Mr.Hope