Markdown Enhance
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.
Frontmatter
Frontmatter is an 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 plugins, the theme extends more Markdown syntax and provides richer writing functions.
Code Tabs
::: code-tabs#shell
@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
:::
Tabs
::: tabs#fruit
@tab apple
Apple
@tab banana
Banana
@tab orange
Orange
:::
Footnote
This text has footnote[1].
Include files
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} $$
Tasklist
- [x] Plan A
- [ ] Plan B
Image Enhancement
Support setting color scheme and size.
Superscript and Subscript
19th H2O
Component
title: Mr.Hope
desc: Where there is light, there is hope
logo: https://mister-hope.com/logo.svg
link: https://mister-hope.com
background: rgba(253, 230, 138, 0.15)
Hint box and GFM alerts
Safely use {{ variable }} in Markdown.
Custom Title
A custom tip container
Custom Title
A custom warning container
Custom Title
A custom caution container
Custom Title
A custom details container
Align
I am center
I am right align
Attrs
A word{#word} having id.
Mark
You can mark ==important words== .
Spoiler
VuePress Theme Hope is !!powerful!!.
Stylize
Donate Mr.Hope a cup of coffee. Recommended
Reveal.js
Chart.js
ECharts
Flowchart
MarkMap
Mermaid
PlantUML
@startuml Alice -> Bob: Authentication Request
alt successful case
Bob -> Alice: Authentication Accepted
else some kind of failure
Bob -> Alice: Authentication Failure
group My own label
Alice -> Log : Log attack start
loop 1000 times
Alice -> Bob: DNS Attack
end
Alice -> Log : Log attack end
end
else Another type of failure
Bob -> Alice: Please repeat
end @enduml
Code Demo
Playground
Kotlin Playground
Sandpack Playground
Vue Playground
This is footnote content ↩︎