Markdown Enhance

Every document page in VuePress is rendered by Markdown.

You need to build your document or blog page by creating and writing Markdown in the corresponding path.

Markdown introduction

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

Frontmatter

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

VuePress enhance

To enrich document writing, VuePress has extended Markdown syntax.

For these extensions, please read Markdown extensions in VuePress.

Theme enhance

Enable all

You can set themeconfig.plugins.htmlEnhance.enableAll to enable all features of the md-enhance plugin.

module.exports = {
  themeConfig: {
    plugins: {
      mdEnhance: {
        enableAll: true,
      },
    },
  },
};

New Feature

Custom Container

::: v-pre

Safely use 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

Code

::: v-pre

Safely use {{ variable }} in markdown.

:::

::: info Custom Title

A custom information container

:::

::: tip Custom Title

A custom tip container

:::

::: warning Custom Title

A custom warning container

:::

::: danger Custom Title

A custom danger container

:::

::: details Custom Title

A custom details container

:::

CodeGroup

:::: code-group

::: code-group-item yarn

yarn add -D vuepress-theme-hope

:::

::: code-group-item npm:active

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

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

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

Flowchart

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

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

• View Detail

Mermaid

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

Code Demo

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

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