Markdown

About 3 minGet StartedGet StartedMarkdown

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 comer 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-itopen in new window, which supports syntax extensionsopen in new window via markdown-it plugins.

VuePress Enhancement

To enrich document content, VuePress extends standard Markdown syntax.

For these extended syntax, please see Built-in Markdown Features.

Theme Enhancement

By using vuepress-plugin-md-enhance, 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

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

:::

Tabs

Apple

Code Tabs

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[1].

Mark

You can mark important words .

Tasklist

Image Enhancement

Support setting color scheme and size

Chart

A Scatter Chart

Echarts

A line chart

Flowchart

Mermaid

Tex

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

Include files

Tips

Hey how are you? 😄

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

Vue Playground

Vue Playground

Presentation


  1. This is footnote content ↩︎

Loading...