Skip to content
本页目录

Markdown 模版

语法参考

标题

标题分六级

md
# 标题一
## 标题二
### 标题三
#### 标题四
##### 标题五
###### 标题六

强调语法

md
**加粗**
*斜体*
***粗体和斜体***
`有背景色`

加粗

斜体

粗体和斜体

有背景色

引用语法

md
> 这是一条引用

这是一条引用

列表语法

md
- 无序列表
- 无序列表

1. 有序列表
2. 有序列表
  • 无序列表
  • 无序列表
  1. 有序列表
  2. 有序列表

代码语法

js
const str = 'hello markdown!'

分割线语法

md
***
---

Emoji

md
:tada: :100:

🎉 💯

Emoji 表情列表

注意是 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>

显示效果 👇

更新时间: