行内文本样式 {% %}

  1. 带 下划线 的文本
  2. 带 着重号 的文本
  3. 带 波浪线 的文本
  4. 带 删除线 的文本
  5. 键盘样式的文本 command + D
  6. 密码样式的文本：被看见了
  7. 红色

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
带 {% u 下划线 %} 的文本
带 {% emp 着重号 %} 的文本
带 {% wavy 波浪线 %} 的文本
带 {% del 删除线 %} 的文本
键盘样式的文本 {% kbd command %} + {% kbd D %}
密码样式的文本：{% psw 被看见了 %}
{% span red, 红色 %} or {% label 红色 red %} {% span center logo large , 居中大大大 %}
ps:
1.字体: logo, code
2.颜色: red,yellow,green,cyan,blue,gray
3.大小: small, h4, h3, h2, h1, large, huge, ultra
4.对齐方向: left, center, right
5.span 不能少，当你要设置这些参数的时候
6.label 可以将你的文字用代码的形式展现，如7 1 语法为{% label 红色 red %}

时间轴

2024

01-10

01-10

01-10

01-11

代码如下:

1
2
3
4
5
6
7
8
9
{% timeline 2024 %}
<!-- timeline 01-10 -->
01-10
<!-- endtimeline -->

<!-- timeline 01-10 -->
01-11
<!-- endtimeline -->
{% endtimeline %}

一些插入语法

下面语法如果使用报错可能是加了标签外挂的原因

1
2
3
4
5
6
7
{% video 视频链接 %}
{% audio 音频链接 %}
{% image 图片链接,width=400px ,alt=下方文字 %}当然你也可以设置占位背景色bg=等等，当然html也是可以的。
<img src=图片链接 width="50%" height="50%">
{% inlineimage 图片链接 %}这个是行内的图片语法
{% folding 折叠框 %}
建议 不要 在段落开头使用 label 标签外挂

隐藏标签

我很好

代码如下：

1
2
3
4
5
{% hideInline content,display,bg,color %}
content: 文本内容
display: 按钮显示的文字(可选)
bg: 按钮的背景颜色(可选)
color: 按钮文字的颜色(可选)

按钮

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}
[url]         : 链接
[text]        : 按钮文字
[icon]        : [可选] 图标
[color]       : [可选] 按钮背景顔色(默认style时）
                      按钮字体和边框顔色(outline时)
                      default/blue/pink/red/purple/orange/green
[style]       : [可选] 按钮样式 默认实心
                      outline/留空
[layout]      : [可选] 按钮佈局 默认为line
                      block/留空
[position]    : [可选] 按钮位置 前提是设置了layout为block 默认为左边
                      center/right/留空
[size]        : [可选] 按钮大小
                      larger/留空

分栏展示

他的写法和时间线很像

我是内容1

我是内容2

我是内容3

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{% tabs 第一栏的标题 %}
<!-- tab -->
**我是内容1**
<!-- endtab -->

<!-- tab -->
**我是内容2**
<!-- endtab -->

<!-- tab -->
**我是内容3**
<!-- endtab -->
{% endtabs %}


{% tabs 自定义分栏名字 %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

诗词标签

  • 看着就是优雅
面朝大海，春暖花开
海子

从明天起，做一个幸福的人
喂马、劈柴，周游世界
从明天起，关心粮食和蔬菜
我有一所房子，面朝大海，春暖花开
从明天起，和每一个亲人通信
告诉他们我的幸福
那幸福的闪电告诉我的
我将告诉每一个人
给每一条河每一座山取一个温暖的名字
陌生人，我也为你祝福
愿你有一个灿烂的前程
愿你有情人终成眷属
愿你在尘世获得幸福
我只愿面朝大海，春暖花开

代码如下：

1
2
3
{% poem 标题,作者 %}
内容在这哦
{% endpoem %}
当然这个用法可不仅限于展示诗句，你懂的

阿里图片 icon

这个最好去看看文档

代码如下：

1
{% icon [icon-xxxx],[font-size] %}

note 标签

代码如下：

1
2
3
4
5
6
7
8
9
10
11
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
ps: class标识，不同的标识有不同的配色 （ default / primary / success / info / warning / danger ）


{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
ps: color标识，不同的标识有不同的配色 （ default / blue / pink / red / purple / orange / green ）
不同方法，效果一样

部分展示

  1. simple 样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

你是刷 Visa 还是 UnionPay

2021年快到了…

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

  1. modern 样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

你是刷 Visa 还是 UnionPay

2021年快到了…

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

  1. flat 样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

你是刷 Visa 还是 UnionPay

2021年快到了…

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

  1. disabled 样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

你是刷 Visa 还是 UnionPay

2021年快到了…

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

  1. no-icon 样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

你是刷 Visa 还是 UnionPay

2021年快到了…

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

  1. simple 样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% note simple %}默认 提示块标签{% endnote %}

{% note default simple %}default 提示块标签{% endnote %}

{% note primary simple %}primary 提示块标签{% endnote %}

{% note success simple %}success 提示块标签{% endnote %}

{% note info simple %}info 提示块标签{% endnote %}

{% note warning simple %}warning 提示块标签{% endnote %}

{% note danger simple %}danger 提示块标签{% endnote %}

{% note 'fab fa-cc-visa' simple %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note blue 'fas fa-bullhorn' simple %}2021年快到了....{% endnote %}

{% note pink 'fas fa-car-crash' simple %}小心开车 安全至上{% endnote %}

{% note red 'fas fa-fan' simple%}这是三片呢？还是四片？{% endnote %}

{% note orange 'fas fa-battery-half' simple %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note purple 'far fa-hand-scissors' simple %}剪刀石头布{% endnote %}

{% note green 'fab fa-internet-explorer' simple %}前端最讨厌的浏览器{% endnote %}
  1. modern 样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% note modern %}默认 提示块标签{% endnote %}

{% note default modern %}default 提示块标签{% endnote %}

{% note primary modern %}primary 提示块标签{% endnote %}

{% note success modern %}success 提示块标签{% endnote %}

{% note info modern %}info 提示块标签{% endnote %}

{% note warning modern %}warning 提示块标签{% endnote %}

{% note danger modern %}danger 提示块标签{% endnote %}

{% note 'fab fa-cc-visa' modern %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note blue 'fas fa-bullhorn' modern %}2021年快到了....{% endnote %}

{% note pink 'fas fa-car-crash' modern %}小心开车 安全至上{% endnote %}

{% note red 'fas fa-fan' modern%}这是三片呢？还是四片？{% endnote %}

{% note orange 'fas fa-battery-half' modern %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note purple 'far fa-hand-scissors' modern %}剪刀石头布{% endnote %}

{% note green 'fab fa-internet-explorer' modern %}前端最讨厌的浏览器{% endnote %}
  1. flat 样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% note flat %}默认 提示块标签{% endnote %}

{% note default flat %}default 提示块标签{% endnote %}

{% note primary flat %}primary 提示块标签{% endnote %}

{% note success flat %}success 提示块标签{% endnote %}

{% note info flat %}info 提示块标签{% endnote %}

{% note warning flat %}warning 提示块标签{% endnote %}

{% note danger flat %}danger 提示块标签{% endnote %}

{% note 'fab fa-cc-visa' flat %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note blue 'fas fa-bullhorn' flat %}2021年快到了....{% endnote %}

{% note pink 'fas fa-car-crash' flat %}小心开车 安全至上{% endnote %}

{% note red 'fas fa-fan' flat%}这是三片呢？还是四片？{% endnote %}

{% note orange 'fas fa-battery-half' flat %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note purple 'far fa-hand-scissors' flat %}剪刀石头布{% endnote %}

{% note green 'fab fa-internet-explorer' flat %}前端最讨厌的浏览器{% endnote %}
  1. disabled 样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% note disabled %}默认 提示块标签{% endnote %}

{% note default disabled %}default 提示块标签{% endnote %}

{% note primary disabled %}primary 提示块标签{% endnote %}

{% note success disabled %}success 提示块标签{% endnote %}

{% note info disabled %}info 提示块标签{% endnote %}

{% note warning disabled %}warning 提示块标签{% endnote %}

{% note danger disabled %}danger 提示块标签{% endnote %}

{% note 'fab fa-cc-visa' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note blue 'fas fa-bullhorn' disabled %}2021年快到了....{% endnote %}

{% note pink 'fas fa-car-crash' disabled %}小心开车 安全至上{% endnote %}

{% note red 'fas fa-fan' disabled %}这是三片呢？还是四片？{% endnote %}

{% note orange 'fas fa-battery-half' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note purple 'far fa-hand-scissors' disabled %}剪刀石头布{% endnote %}

{% note green 'fab fa-internet-explorer' disabled %}前端最讨厌的浏览器{% endnote %}
  1. no-icon 样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% note no-icon %}默认 提示块标签{% endnote %}

{% note default no-icon %}default 提示块标签{% endnote %}

{% note primary no-icon %}primary 提示块标签{% endnote %}

{% note success no-icon %}success 提示块标签{% endnote %}

{% note info no-icon %}info 提示块标签{% endnote %}

{% note warning no-icon %}warning 提示块标签{% endnote %}

{% note danger no-icon %}danger 提示块标签{% endnote %}

{% note no-icon %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note blue no-icon %}2021年快到了....{% endnote %}

{% note pink no-icon %}小心开车 安全至上{% endnote %}

{% note red no-icon %}这是三片呢？还是四片？{% endnote %}

{% note orange no-icon %}你是刷 Visa 还是 UnionPay{% endnote %}

{% note purple no-icon %}剪刀石头布{% endnote %}

{% note green no-icon %}前端最讨厌的浏览器{% endnote %}

加点特效 wow

请确保你下载了wowjs

心动动画效果，延时5s，重复5次。

代码如下：

1
2
3
{% wow 动画样式，持续时间（选填），动画开始的延迟时间（选填），动画开始的距离（相对浏览器底部），动画重复次数（选填） %}
内容
{% endwow %}

这里要注意，虽然部分参数是选填。但是当你不填的时候也要严格按照上述的顺序

动画样式官方文档👉https://animate.style/

来点进度条 progress

进不去，怎么想都进不去吧！

像不像你卡半岩的时候 没玩过原，不知道是什么游戏[doge]
代码如下：

1
{% progress 进度 颜色 内容 %}

注释 notation

把鼠标移动到我上面试试

代码如下：

1
{% nota 把鼠标移动到我上面试试 ,你还真的移啊 %}

动态标签 anima

建议看官方文档去

警告

禁止

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tip [参数，可选] %}文本内容{% endtip %}
当页面加载时显示动画
{% tip warning faa-horizontal animated %}warning{% endtip %}
{% tip ban faa-flash animated %}ban{% endtip %}
调整动画速度
{% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}
{% tip ban faa-flash animated faa-slow %}ban{% endtip %}
当鼠标悬停时显示动画
{% tip warning faa-horizontal animated-hover %}warning{% endtip %}
{% tip ban faa-flash animated-hover %}ban{% endtip %}
当鼠标悬停在父级元素时显示动画
{% tip warning faa-parent animated-hover %}<p class="faa-horizontal">warning</p>{% endtip %}
{% tip ban faa-parent animated-hover %}<p class="faa-flash">ban</p>{% endtip %}

尾声

markdown的大部分语法都是{% %}
所以我们只需要记住每个标签是干什么用的就行

标签 效果
u 下划线
emp 着重号
wavy 波浪线
del 删除线
kdd 键盘样式
psw 密码样式
label 代码框
span 样式设计
timeline 时间线
video 视频链接
audio 音频链接
image 图片链接
folding 折叠框
hideInline 隐藏内容
btn 按钮
tabs 分栏展示
poem 诗词展示
icon 阿里图片
wow 来点特效
progress 进度条
notation 弹窗注释
anima 动态标签
但还是要多敲才行