Markdown Enhance
- Guide
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 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-it, which supports syntax extensions via markdown-it plugins.
VuePress Enhancement
To enrich document writing, VuePress has extended Markdown syntax.
For these extensions, please read Markdown extensions in VuePress.
Theme Enhancement
By using vuepress-plugin-md-enhance, the theme extends more Markdown syntax and provides richer writing functions.
Enable all
You can set plugins.mdEnhance.enableAll: true in theme options to enable all features of the md-enhance plugin.
::: code-tabs#language
@tab TS
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
plugins: {
mdEnhance: {
enableAll: true,
},
},
}),
};
@tab JS
const { hopeTheme } = require("vuepress-theme-hope");
module.exports = {
theme: hopeTheme({
plugins: {
mdEnhance: {
enableAll: true,
},
},
}),
};
:::
Custom Container
::: v-pre
Safely use in Markdown.
:::
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
::: tabs#fruit
@tab apple
Apple
@tab banana
Banana
@tab orange
Orange
:::
Code Tabs
::: code-tabs
@tab pnpm
pnpm add -D vuepress-theme-hope
@tab yarn
yarn add -D vuepress-theme-hope
@tab:active npm
npm i -D vuepress-theme-hope
:::
Superscript and Subscript
19^th^ H~2~O
Align
::: center
I am center
:::
::: right
I am right align
:::
Footnote
This text has footnote[^first].
[^first]: This is footnote content
Mark
You can mark ==important words== .
Tasklist
[x] Plan A
[ ] Plan B
Image Enhancement
Support setting color scheme and size
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
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} $$
Include files
@include(./README.md{11-17})
Code Demo
::: normal-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
Setting this to a invalid stytax doesn't have any effect.