Markdown 教程

Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。

Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。

Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。

Markdown 编写的文档后缀为 .md, .markdown

行内文本样式 text

1
2
3
4
5
6
{% u 文本内容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd 文本内容 %}
{% psw 文本内容 %}
  1. 下划线 的文本
  2. 着重号的文本
  3. 波浪线的文本
  4. 删除线 的文本
  5. 键盘样式的文本 command + D
  6. 密码样式的文本:这里没有验证码
1
2
3
4
5
6
1. 带 {% u 下划线 %} 的文本
2. 带 {% emp 着重号 %} 的文本
3. 带 {% wavy 波浪线 %} 的文本
4. 带 {% del 删除线 %} 的文本
5. 键盘样式的文本 {% kbd command %} + {% kbd D %}
6. 密码样式的文本:{% psw 这里没有验证码 %}

行内文本 span

1
{% span 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
  • 彩色文字
    在一段话中方便插入各种颜色的标签,包括:红色黄色绿色青色蓝色灰色
  • 超大号文字
    文档「开始」页面中的标题部分就是超大号文字。

    A Wonderful Theme for Hexo
1
2
3
4
5
6
- 彩色文字
在一段话中方便插入各种颜色的标签,包括:{% 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

1
{% p 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
  • 彩色文字
    在一段话中方便插入各种颜色的标签,包括:

    红色

    黄色

    绿色

    青色

    蓝色

    灰色

  • 超大号文字
    文档「开始」页面中的标题部分就是超大号文字。

    A Wonderful Theme for Hexo

1
2
3
4
5
6
- 彩色文字
在一段话中方便插入各种颜色的标签,包括:{% 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 %}

上标标签 tip

主要样式参考自小康的 butterfly 渐变背景标签 , 自己写了个 tip.js 来渲染标签,精简了一下代码。

1
{% tip [参数,可选] %}文本内容{% endtip %}
  1. 样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
  2. 自定义图标:支持 fontawesome。

默认情况

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

1
2
3
4
5
6
7
8
9
10
11
12
{% 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 %}

动态标签 anima

动态标签的实质是引用了 font-awesome-animation 的 css 样式,不一定局限于 tip 标签,也可以是其他标签。
只不过这里 tip.js 是我自己写的,所以我清楚它会怎么被渲染成 html,才用的这个写法。
可以熟读文档,使用 html 语言来编写其他标签类型。

1
{% tip [参数,可选] %}文本内容{% endtip %}
  1. 更多详情请参看 font-awesome-animation 文档
    1. 将所需的 CSS 类添加到图标(或 DOM 中的任何元素)。
    2. 对于父级悬停样式,需要给目标元素添加指定 CSS 类,同时还要给目标元素的父级元素添加 CSS 类 faa-parent animated-hover。(详情见示例及示例源码)
      You can regulate the speed of the animation by adding the CSS class or . faa-fastfaa-slow
    3. 可以通过给目标元素添加 CSS 类 faa-fastfaa-slow 来控制动画快慢。
On DOM load 当页面加载时 显示动画On hover 当鼠标悬停时 显示动画On parent hover 当鼠标悬停 在父级元素时 显示动画
faa-wrench animatedfaa-wrench animated-hoverfaa-wrench
faa-ring animatedfaa-ring animated-hoverfaa-ring
faa-horizontal animatedfaa-horizontal animated-hoverfaa-horizontal
faa-vertical animatedfaa-vertical animated-hoverfaa-vertical
faa-flash animatedfaa-flash animated-hoverfaa-flash
faa-bounce animatedfaa-bounce animated-hoverfaa-bounce
faa-spin animatedfaa-spin animated-hoverfaa-spin
faa-tada animatedfaa-tada animated-hoverfaa-tada
faa-pulse animatedfaa-pulse animated-hoverfaa-pulse
faa-shake animatedfaa-shake animated-hoverfaa-shake
faa-tada animatedfaa-tada animated-hoverfaa-tada
faa-passing animatedfaa-passing animated-hoverfaa-passing
faa-passing-reverse animatedfaa-passing-reverse animated-hoverfaa-passing-reverse
faa-burst animatedfaa-burst animated-hoverfaa-burst
faa-falling animatedfaa-falling animated-hoverfaa-falling
faa-rising animatedfaa-rising animated-hoverfaa-rising
  1. On DOM load(当页面加载时显示动画)

    warning

    ban

  2. 调整动画速度

    warning

    ban

  3. On hover(当鼠标悬停时显示动画)

    warning

    ban

  4. On parent hover(当鼠标悬停在父级元素时显示动画)

    warning

    ban

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 %}

折叠框 folding

Butterfly 虽然也有内置折叠框 hideToggle 标签,但是 Volantisfolding 折叠框更好看一些

1
2
3
{% folding 参数(可选), 标题 %}
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}
  1. 颜色:blue, cyan, green, yellow, red
  2. 状态:状态填写 open 代表默认打开。
查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试

假装这里有代码块(代码块没法嵌套代码块)

查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

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
29
30
31
32
33
34
35
36
{% folding 查看图片测试 %}

![](https://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

注释 notation

1
{% nota [label] , [text] %}
  1. label: 注释词汇
  2. text: 悬停显示的注解内容

把鼠标移动到我上面试试

1
{% nota 把鼠标移动到我上面试试 ,可以看到注解内容出现在顶栏 %}