GFM 语法 Demo 的主标题
GFM 语法 Demo 的主标题
Markdown 官方标准地址:
https://markdown.com.cn
GFM 语法文档(现阶段流行最广泛的事实标准):
https://gfm.docschina.org/zh-hans/
Frontmatter
https://v2.vuepress.vuejs.org/zh/reference/frontmatter.html
https://theme-hope.vuejs.press/zh/config/frontmatter/info.html
---
description: 页面的描述
date: 2020-12-01 # 页面创建日期
layout: 页面的布局,参见主题文档,一般用不上
permalink: 页面的永久链接(绝对路径)
isOriginal: 是否为原创
icon: 图标
category:
- 分类1
- 分类2
tags:
- 标签1
- 标签2
license: MIT # 许可证
pageview: true # 是否显示浏览量,默认为 true
sticky: 1 # 是否在列表中置顶,数字越大,排名越靠前
star: 1 # 是否标为星标文章。当填入数字时,数字越大,排名越靠前。
cover: 封面图
navbar: false # 禁用顶部导航栏
sidebar: false # 禁用侧边导航栏
index: false # 页面将无法被索引
order: 1 # 指定当前页面在侧边栏或目录中的排序,越小越靠前。可为负数( -1 在 -2 之后)
lastUpdated: true # 是否显示最后更新时间
toc: false # 侧边的标题
containerClass: # 为当前页面的 <div> 添加类名
---
提示
前面用数个 #
来标示标题,一个 #
标示一级标题,两个 #
标示二级标题,以此类推。
二级标题
三级标题
四级标题
五级标题
六级标题
段落语法
用空一行进行隔开
不要用空格或者制表符缩进段落
这里是第一段文字。
这里是第二段文字。
这里是第三段文字。
这里是第四段文字。
这里是第五段文字。
换行语法
末尾加两个空格即可换行。
在 VSCode 中一个空格不会被换行。VuePress 中一个空格会被换行。
This is the first line.
And this is the second line.
强调语法
两个星号
**加粗内容**
或者下划线__加粗粗内容__
标示加粗。
一个下划线或者下划线标示斜体_倾斜文本_
这是一段话中被 加粗 的部分。
这是一段话中被 倾斜 的的部分。
这是一段话中 加粗倾斜 的部分。
引用语法
前面加一个大于号
>
表示引用
这里是引用的换行 1
这里是引用的换行 2
这里是引用的一段文字
这里是引用的更换段落,VSCode 中可以明显表示出来,但是 VuePress 中无法体现
这里是引用的一段文字
两个大于号标示嵌套引用
这里是引用的一段文字
引用当中是可以夹带列表的
- asd
- asd
- asd
一级标题
二级标题
三级标题
列表语法
有序列表
数字带点
1.
标示有序列表
- 第一行
- 第二行
- 第三行
- 第四行
无序列表
前面使用
-
、*
标示无序列表
- 第一行
- 第二行
- 第三行
- 第四行
列表的嵌套
前面加一个 Tab 键标示嵌套
- 第一行有序列表
- 嵌套一个有序列表
- 嵌套一个无序列表
- 嵌套一个无序列表
- 嵌套一个有序列表
- 嵌套一个有序列表
- 嵌套一个有序列表
- 第二行有序列表
- 第三行无序列表
- 第四行有序列表
代码语法
使用反引号 (``) 包裹的部分就是代码语法
JavaScript 的打印日志的方法是console.log('hello world')
。
如果想要创建代码块缩进四个空格
<html>
<head>
<title>hello world</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
也可以使用 围栏代码块
<html>
<head>
<title>hello world</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
分割线语法
使用多个星号
***
、破折号---
或者下划线___
来表示分割线
链接语法
使用
[超链接显示名](超链接地址 "超链接title")
来表示链接语法
图片语法
使用
![图片显示名](图片地址)
来表示图片语法
图片语法和链接语法是可以嵌套的
[![这里是图片显示名](img/投资学.png)](https://www.bing.com)
转义字符语法
如果想要显示一些特殊符号则可以使用
\
进行转义来展示
我想展示双星号
**这里是双星号**
内嵌 HTML 标签
This word is bold. This word is italic.
比如写入一个表格
Person | Most interest in | Age |
---|---|---|
Chris | HTML tables | 22 |
Dennis | Web accessibility | 45 |
Sarah | JavaScript frameworks | 29 |
Karen | Web performance | 36 |
Average age | 33 |
表格
Person | Most interest in | Age |
---|---|---|
Chris | HTML tables | 22 |
Dennis | Web accessibility | 45 |
Sarah | JavaScript frameworks | 29 |
Karen | Web performance | 36 |
脚注
VSCode 貌似无法很好的展示脚注,但是 VuePress 可以很好的编译展示。
设置标题编号
## 二级标题{#page-title}
[点击跳转到二级标题](#page-title)
定义列表
First Term
: This is the definition of the first term.
Second Term
: This is one definition of the second term.
: This is another definition of the second term.
貌似 VSCode 和 VuePress 都无法很好的展示这个语法
删除线
使用
~~被删除的内容~~
包裹起来的文本
这里是被删除的内容
任务列表语法
使用 Emoji 表情
去露营了! ⛺ 很快回来。
真好笑! 😂
😂
这里建议直接使用输入法输入 Emoji ,VSCode 无法正确展示,但是 VuePress 可以正常编译。
以下是 VuePress 的 Markdown 增强语法,并不属于 Markdown 标准
上下角标
- 19th
- H2O
导入文件
import { sidebar } from 'vuepress-theme-hope';
export const enSidebar = sidebar({
'/en/': [
'',
{
icon: 'discover',
text: 'Demo',
prefix: 'demo/',
link: 'demo/',
children: 'structure',
},
{
text: 'Articles',
icon: 'note',
prefix: 'posts/',
children: 'structure',
},
'intro',
'slides',
],
});
选项卡
内容 1
内容 2
内容三,默认激活
GFM 警告
重要
重要文字
相关信息
信息文字
提示
提示文字
注意
注意文字
警告
警告文字
注
注释文字
剧透文字
使用
!! !!
包裹的文字
VuePress Theme Hope 非常强大!
属性支持
使用
{.className}
来给块添加 class 或者其它属性
包含 行内代码
和 的文字,也支持 强调 和 加粗。
提示容器
xxx
详情容器
标记
使用
== ==
包裹的文字被高亮显示
VuePress Theme Hope 非常 强大!
自定义对齐
左对齐的内容
居中的内容
右对齐的内容
两端对齐的内容
ECharts 图表
语法:
::: echarts 标题
```json
{
// 此处为 ECharts 图表配置
}
```
:::
- 0
- 0
- 0
- 0
- 0
- 0