Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。
Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。
Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。
Markdown 编写的文档后缀为 .md, .markdown。
{% u 文本内容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd 文本内容 %}
{% psw 文本内容 %}
1. 带 {% u 下划线 %} 的文本
2. 带 {% emp 着重号 %} 的文本
3. 带 {% wavy 波浪线 %} 的文本
4. 带 {% del 删除线 %} 的文本
5. 键盘样式的文本 {% kbd command %} + {% kbd D %}
6. 密码样式的文本:{% psw 这里没有验证码 %}
{% span 样式参数(参数以空格划分), 文本内容 %}
- 彩色文字
在一段话中方便插入各种颜色的标签,包括:{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
{% span center logo large, Volantis %}
{% span center small, A Wonderful Theme for Hexo %}
{% p 样式参数(参数以空格划分), 文本内容 %}
- 彩色文字
在一段话中方便插入各种颜色的标签,包括:{% p red, 红色 %}、{% p yellow, 黄色 %}、{% p green, 绿色 %}、{% p cyan, 青色 %}、{% p blue, 蓝色 %}、{% p gray, 灰色 %}。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
{% p center logo large, Volantis %}
{% p center small, A Wonderful Theme for Hexo %}
主要样式参考自小康的 butterfly 渐变背景标签 , 自己写了个 tip.js
来渲染标签,精简了一下代码。
{% tip [参数,可选] %}文本内容{% endtip %}
默认情况
success
error
warning
bolt
ban
home
sync
cogs
key
bell
自定义font awesome图标
{% tip %}默认情况{% endtip %}
{% tip success %}success{% endtip %}
{% tip error %}error{% endtip %}
{% tip warning %}warning{% endtip %}
{% tip bolt %}bolt{% endtip %}
{% tip ban %}ban{% endtip %}
{% tip home %}home{% endtip %}
{% tip sync %}sync{% endtip %}
{% tip cogs %}cogs{% endtip %}
{% tip key %}key{% endtip %}
{% tip bell %}bell{% endtip %}
{% tip fa-atom %}自定义font awesome图标{% endtip %}
动态标签的实质是引用了 font-awesome-animation 的 css 样式,不一定局限于 tip 标签,也可以是其他标签。
只不过这里 tip.js
是我自己写的,所以我清楚它会怎么被渲染成 html,才用的这个写法。
可以熟读文档,使用 html 语言来编写其他标签类型。
{% tip [参数,可选] %}文本内容{% endtip %}
faa-parent animated-hover
。(详情见示例及示例源码)
You can regulate the speed of the animation by adding the CSS class or . faa-fastfaa-slowfaa-fast
或 faa-slow
来控制动画快慢。On DOM load 当页面加载时 显示动画 | On hover 当鼠标悬停时 显示动画 | On parent hover 当鼠标悬停 在父级元素时 显示动画 |
---|---|---|
faa-wrench animated | faa-wrench animated-hover | faa-wrench |
faa-ring animated | faa-ring animated-hover | faa-ring |
faa-horizontal animated | faa-horizontal animated-hover | faa-horizontal |
faa-vertical animated | faa-vertical animated-hover | faa-vertical |
faa-flash animated | faa-flash animated-hover | faa-flash |
faa-bounce animated | faa-bounce animated-hover | faa-bounce |
faa-spin animated | faa-spin animated-hover | faa-spin |
faa-tada animated | faa-tada animated-hover | faa-tada |
faa-pulse animated | faa-pulse animated-hover | faa-pulse |
faa-shake animated | faa-shake animated-hover | faa-shake |
faa-tada animated | faa-tada animated-hover | faa-tada |
faa-passing animated | faa-passing animated-hover | faa-passing |
faa-passing-reverse animated | faa-passing-reverse animated-hover | faa-passing-reverse |
faa-burst animated | faa-burst animated-hover | faa-burst |
faa-falling animated | faa-falling animated-hover | faa-falling |
faa-rising animated | faa-rising animated-hover | faa-rising |
1. On DOM load(当页面加载时显示动画)
{% tip warning faa-horizontal animated %}warning{% endtip %}
{% tip ban faa-flash animated %}ban{% endtip %}
2. 调整动画速度
{% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}
{% tip ban faa-flash animated faa-slow %}ban{% endtip %}
3. On hover(当鼠标悬停时显示动画)
{% tip warning faa-horizontal animated-hover %}warning{% endtip %}
{% tip ban faa-flash animated-hover %}ban{% endtip %}
4. On parent hover(当鼠标悬停在父级元素时显示动画)
{% 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 %}
Butterfly
虽然也有内置折叠框 hideToggle
标签,但是 Volantis
的 folding
折叠框更好看一些
{% folding 参数(可选), 标题 %}
![](https://fastly.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}
查看图片测试
查看默认打开的折叠框
这是一个默认打开的折叠框。
查看代码测试
假装这里有代码块(代码块没法嵌套代码块)
查看列表测试
查看嵌套测试
查看嵌套测试2
查看嵌套测试3
hahaha
{% folding 查看图片测试 %}
![](https://fastly.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}
{% folding cyan open, 查看默认打开的折叠框 %}
这是一个默认打开的折叠框。
{% endfolding %}
{% folding green, 查看代码测试 %}
假装这里有代码块(代码块没法嵌套代码块)
{% endfolding %}
{% folding yellow, 查看列表测试 %}
- haha
- hehe
{% endfolding %}
{% folding red, 查看嵌套测试 %}
{% folding blue, 查看嵌套测试2 %}
{% folding 查看嵌套测试3 %}
hahaha <span><img src='https://fastly.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>
{% endfolding %}
{% endfolding %}
{% endfolding %}
{% nota [label] , [text] %}
label
: 注释词汇text
: 悬停显示的注解内容把鼠标移动到我上面试试
{% nota 把鼠标移动到我上面试试 ,可以看到注解内容出现在顶栏 %}