Appearance
Markdown 模版
语法参考
标题
标题分六级
md
# 标题一
## 标题二
### 标题三
#### 标题四
##### 标题五
###### 标题六
强调语法
md
**加粗**
*斜体*
***粗体和斜体***
`有背景色`
加粗
斜体
粗体和斜体
有背景色
引用语法
md
> 这是一条引用
这是一条引用
列表语法
md
- 无序列表
- 无序列表
1. 有序列表
2. 有序列表
- 无序列表
- 无序列表
- 有序列表
- 有序列表
代码语法
js
const str = 'hello markdown!'
分割线语法
md
***
---
Emoji
md
:tada: :100:
🎉 💯
注意是
github
地址,可能会打不开
流程图
需要在 流程图编辑器 中
生成代码
js
<FLowViewer :data="data" />
图片
提示
skeletonHeight
为加载图片前显示的占位
高度。
点击图片会自动进入画廊
模式,显示本页所有的图片,可以放大和切换。
js
<CustomImage src="图片链接地址" skeletonHeight="200px" />
图片加载中...
图片一
图片加载中...
图片二
视频
js
// 默认方式,高度为 400px
<CustomVideo
poster="视频封面链接"
src="视频链接"
type="mp4"
/>
// 自定义高度
<CustomVideo
poster="视频封面链接"
src="视频链接"
type="mp4"
height="350px"
/>
横向视频,高度 350px 👇
竖向视频,高度 350px 👇
提示
请合理设置视频高度和封面图片。
提示信息
md
::: info 信息
This is an info box.
:::
::: tip 提示
This is a tip.
:::
::: warning 提示标题
This is a warning.
:::
::: danger 提示标题
This is a dangerous warning.
:::
::: details 提示标题
This is a details block.
:::
提示
这是一个提示信息.
可折叠提示框
折叠框内容。
链接跳转
外链跳转
md
[百度一下](https://baidu.com)
站内跳转
假设你的 md 文档目录结构如下:
md
.
├─ index.md
├─ foo
│ ├─ index.md
│ ├─ one.md
│ └─ two.md
└─ bar
├─ index.md
├─ three.md
└─ four.md
假设你正在编写 foo/one.md 文件。
md
[首页](/) <!-- 首页链接 -->
[foo](/foo/) <!-- 链接到 foo/index.md -->
[foo heading](./#heading) <!-- 定位到 foo.md 中 #heading 开头的位置 -->
[bar - three](../bar/three) <!-- 链接到 bar/three -->
[bar - three](../bar/three.md) <!-- 链接到 bar/three.md 也可以加后缀名 md -->
[bar - four](../bar/four.html) <!-- 链接到 bar/four.md 也可以加后缀名 html -->
本页二维码
js
// 默认上下距离 10px
<ClientOnly>
<CustomQrCode />
</ClientOnly>
// 上下距离 20px
<ClientOnly>
<CustomQrCode marginTop="20px" marginBottom="20px" />
</ClientOnly>
显示效果 👇
视频轮播
html
<VideoCarousel
:carouselItems="carouselItems"
:autoPlay="true"
:interval="4000"
height="200px"
/>
<script setup>
// 此处为定义视频轮播内容的地方
const carouselItems = [
{
systemName: '新中大',
title: '增值税发票的开票申请',
imageUrl:
'http://gfwd.sxjzgcyxgs.com/i8/%E8%B4%A2%E7%A8%8E/%E5%A2%9E%E5%80%BC%E7%A8%8E%E5%8F%91%E7%A5%A8%E7%9A%84%E5%BC%80%E7%A5%A8%E7%94%B3%E8%AF%B7.png',
videoUrl:
'http://gfwd.sxjzgcyxgs.com/i8/%E8%B4%A2%E7%A8%8E/69e192a4201890dbfd52540d65003b6a.mp4'
},
{
systemName: '新中大',
title: '增值税预缴单',
imageUrl:
'http://gfwd.sxjzgcyxgs.com/i8/%E8%B4%A2%E7%A8%8E/%E5%A2%9E%E5%80%BC%E7%A8%8E%E9%A2%84%E7%BC%B4%E5%8D%95.png',
videoUrl:
'http://gfwd.sxjzgcyxgs.com/i8/%E8%B4%A2%E7%A8%8E/i8_%E5%A2%9E%E5%80%BC%E7%A8%8E%E9%A2%84%E7%BC%B4%E5%8D%95.mp4'
},
{
systemName: '契约锁',
title: '电子签章验真伪的方法',
imageUrl:
'http://gfwd.sxjzgcyxgs.com/%E5%A5%91%E7%BA%A6%E9%94%81/%E7%94%B5%E5%AD%90%E7%AD%BE%E7%AB%A0%E9%AA%8C%E7%9C%9F%E4%BC%AA%E7%9A%84%E6%96%B9%E6%B3%951.png',
videoUrl:
'http://gfwd.sxjzgcyxgs.com/%E5%A5%91%E7%BA%A6%E9%94%81/%E7%94%B5%E5%AD%90%E7%AD%BE%E7%AB%A0%E9%AA%8C%E7%9C%9F%E4%BC%AA%E7%9A%84%E6%96%B9%E6%B3%95.mp4'
}
]
</script>
显示效果 👇
折叠面板
html
<CustomCollapse :collapseItems="collapseItems"></CustomCollapse>
<script setup>
// 此处为定义折叠面板内容的地方
const collapseItems = [
{
icon: 'Promotion',
title: '标题1',
text1: '文本a',
imageUrl1: 'http://gfwd.sxjzgcyxgs.com/%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD1.png',
text2: '文本aa',
imageUrl2: 'http://gfwd.sxjzgcyxgs.com/%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD2.png'
},
{
icon: 'InfoFilled',
title: '标题2',
text1: '文本b'
},
{
icon: 'QuestionFilled',
title: '标题3',
text1: '文本c',
imageUrl1: 'http://gfwd.sxjzgcyxgs.com/%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD3.png'
},
{
icon: 'WarningFilled',
title: '标题4',
text1: '文本d',
imageUrl1: 'http://gfwd.sxjzgcyxgs.com/%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD2.png'
},
{
icon: 'WarnTriangleFilled',
title: '标题5',
text1: '文本e',
imageUrl1: 'http://gfwd.sxjzgcyxgs.com/%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD1.png'
},
{
icon: 'Comment',
title: '标题6',
text1: '文本f',
imageUrl1: 'http://gfwd.sxjzgcyxgs.com/%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD3.png'
}
]
</script>
显示效果 👇
标题1
标题2
标题3
标题4
标题5
标题6