Markdown简单教程
Markdown语言简介
Markdown是一种轻量级的「标记语言」,语法简单易于上手,2004年由John Gruber创建。Markdown通过纯文本编写的方式实现文章的撰写与排版,然后被转化为html或者pdf,可以轻松地将文章分享。相较于文本编辑器word的文章排版的方式,Markdown通过固定的文本格式实现了绝大多数的排版场景,让创作者可以专心于文章的构思于撰写,而从繁琐的排版工作中解脱出来。
Markdown书写工具
Markdown也得到了广泛的支持,例如简书、github、知乎、博客园等等都支持直接上传Markdown文档,同时一些桌面程序也支持利用Markdown语法记录文章。推荐的Markdown文档工具如下:
一些在线的Markdown工具:
- MaHua在线编辑器,无须测试
- Cmd Markdown客户端编译器
Markdown语法
很多博客的文章也是用Markdown写成的,因此花几分钟学习Markdown的语法还是很有必要的。下面介绍最常用的几种Markdown语法。
标题
1 | # 一级标题 |
字体
1 | **加粗** |
加粗
斜线删除线
由于markdown支持插入html标签,因此更复杂的字体设置可以通过html标签跟css控制:1
2
3
4
5
6<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN" color=#0099ff>我是华文彩云</font>
<font color=#00ffff size=2>color=#00ffff</font>
<font color=gray size=3>color=gray</font>
<table><tr><td bgcolor=orange>背景色是:orange</td></tr></table>
我是黑体字
我是微软雅黑
我是华文彩云
color=#00ffff
color=gray
背景色是:orange |
分割线
1 | *** 或者 --- |
下面是分割线:
引用
1 | > 有一分热,发一分光,就令萤火一般,也可以在黑暗里发一点光,不必等候炬火。 |
有一分热,发一分光,就令萤火一般,也可以在黑暗里发一点光,不必等候炬火。此后如竟没有炬火,我便是唯一的光。倘若有了炬火,出了太阳,我们自然心悦诚服的消失。不但毫无不平,而且还要随喜赞美这炬火或太阳;因为他照了人类,连我都在内。
列表
1 | 1. 有序列表.1 |
- 有序列表.1
- 有序列表.2
- 无序列表.1
- 无序列表.2
代码
1 | 行内代码: `行内代码` |
行内代码: 行内代码
块内代码:1
let name = 'syz'
表格
1 | | Tables | Are | Cool | |
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | $1600 |
col 2 is | centered | $12 |
zebra stripes | are neat | $1 |
:——————-: 表示居中,——-:表示靠右居中
外链及图片
1 | 插入链接: |
1 | 插入图片: |
公式
行内公式:使用两个“ $ ”符号引用公式:
行间公式:使用两对“ $ ”公式$$$$
本博客采用的数学公式库为 katex,它是一个支持HTML的轻量级的数学公式引擎,使用起来也非常简单。
可以通过在线可视化公式编辑器,实现公式代码的生成
1 | 行内公式:$E=mc^2$ |
行内公式:$E=mc^2$
1 | 行间公式: |
Markdown进阶
Tabs
使用方法:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}
Unique name : Unique name of tabs block tag without comma.
Will be used in #id's as prefix for each tab with their index numbers.
If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
Only for current url of post/page must be unique!
[index] : Index number of active tab.
If not specified, first tab (1) will be selected.
If index is -1, no tab will be selected. It's will be something like spoiler.
Optional parameter.
[Tab caption] : Caption of current tab.
If not caption specified, unique name with tab index suffix will be used as caption of tab.
If not caption specified, but specified icon, caption will empty.
Optional parameter.
[@icon] : FontAwesome icon name (full-name, look like 'fas fa-font')
Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
Optional parameter.
Demo 1 - 预设选择第一个【默认】
1 | {% tabs test1 %} |
This is Tab 1.
This is Tab 2.
This is Tab 3.
Demo 2 - 预设选择tabs
1 | {% tabs test2, 3 %} |
This is Tab 1.
This is Tab 2.
This is Tab 3.
Demo 3 - 没有预设值
1 | {% tabs test3, -1 %} |
This is Tab 1.
This is Tab 2.
This is Tab 3.
Demo 4 - 自定义Tab名 + 只有icon + icon和Tab名
1 | {% tabs test4 %} |
tab名字为第一个Tab
只有图标 没有Tab名字
名字+icon
Note便签
移植于next主题,并进行修改。
修改 主题配置文件
1
2
3
4
5
6
7
8
9
10
11
12note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: simple
icons: false
border_radius: 3
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0icons
和light_bg_offset
只对方法一生效
Note 标签外挂有两种用法
1 | {% note [class] [no-icon] [style] %} |
名称 | 用法 |
---|---|
class | 【可选】标签,不同的标签有不同的配色 ( default / primary / success / info / warning / danger ) |
no-icon | 【可选】不显示 icon |
style | 【可选】可以覆盖配置中的 style (simple/modern/flat/disabled) |
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 %}
默认 提示块标籤
default 提示块标籤
primary 提示块标籤
success 提示块标籤
info 提示块标籤
warning 提示块标籤
danger 提示块标籤
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 %}
默认 提示块标籤
default 提示块标籤
primary 提示块标籤
success 提示块标籤
info 提示块标籤
warning 提示块标籤
danger 提示块标籤
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 %}
默认 提示块标籤
default 提示块标籤
primary 提示块标籤
success 提示块标籤
info 提示块标籤
warning 提示块标籤
danger 提示块标籤
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 %}
默认 提示块标籤
default 提示块标籤
primary 提示块标籤
success 提示块标籤
info 提示块标籤
warning 提示块标籤
danger 提示块标籤
1 | {% note [color] [icon] [style] %} |
名称 | 用法 |
---|---|
color | 【可选】顔色 (default / blue / pink / red / purple / orange / green) |
icon | 【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon ) |
style | 【可选】可以覆盖配置中的 style (simple/modern/flat/disabled) |
simple
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 {% 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 %}你是刷 Visa 还是 UnionPay
2021年快到了….
小心开车 安全至上
这是三片呢?还是四片?
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
modern
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 {% 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 %}你是刷 Visa 还是 UnionPay
2021年快到了….
小心开车 安全至上
这是三片呢?还是四片?
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
flat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 {% 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 %}你是刷 Visa 还是 UnionPay
2021年快到了….
小心开车 安全至上
这是三片呢?还是四片?
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
disabled
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 {% 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 %}
你是刷 Visa 还是 UnionPay
2021年快到了….
小心开车 安全至上
这是三片呢?还是四片?
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
no-icon
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 {% 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 %}
tag-hide
请注意,tag-hide内的标签外挂content内都不建议有h1 - h6 等标题。因为Toc会把隐藏内容标题也显示出来,而且当滚动屏幕时,如果隐藏内容没有显示出来,会导致Toc的滚动出现异常。
inline
在文本里面添加按钮隐藏内容,只限文字
( content不能包含英文逗号,可用&sbquo
;)1
{% hideInline content,display,bg,color %}
- content: 文本内容
- display: 按钮显示的文字(可选)
- bg: 按钮的背景颜色(可选)
- color: 按钮文字的颜色(可选)
Demo
1
2
3 哪个英文字母最酷? {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}
门里站着一个人? {% hideInline 闪 %}
哪个英文字母最酷?
门里站着一个人?
block
独立的block隐藏内容,可以隐藏很多内容,包括图片,代码块等等
( display 不能包含英文逗号,可用&sbquo
;)
1 | {% hideBlock display,bg,color %} |
- content: 文本内容
- display: 按钮显示的文字(可选)
- bg: 按钮的背景颜色(可选)
- color: 按钮文字的颜色(可选)
Demo
1 | 查看答案 |
查看答案
如果你需要展示的内容太多,可以把它隐藏在收缩框里,需要时再把它展开。
( display 不能包含英文逗号,可用&sbquo
;)1
2
3{% hideToggle display,bg,color %}
content
{% endhideToggle %}
Demo
1
2
3
4
5
6
7
8
9
10 {% hideToggle Butterfly安装方法 %}
在你的博客根目录里
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
如果想要安装比较新的dev分支,可以
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
{% endhideToggle %}
Butterfly安装方法
在你的博客根目录里
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
如果想要安装比较新的dev分支,可以
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
mermaid 绘图
mermaid标签不允许嵌套于一些隐藏属性的标签外挂,例如: tag-hide内的标签外挂和tabs标签外挂,这会导致mermaid图示无法正常显示,使用时请留意。
请不要压缩html代码,不然会导致mermaid显示异常
使用mermaid标签可以绘製Flowchart(流程图)、Sequence diagram(时序图 )、Class Diagram(类别图)、State Diagram(状态图)、Gantt(甘特图)和Pie Chart(圆形图),具体可以查看mermaid文档
修改 主题配置文件
1 | mermaid: |
写法:
1 | {% mermaid %} |
例如:
1 | {% mermaid %} |
Button
使用方法:
1 | {% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %} |
Demo
1 | This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly %} |
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly
1 | {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block %} |
more than one button in center
1 | {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %} |
1 | <div class="btn-center"> |
inlineimg
主题中的图片都是默认以块级元素
显示,如果你想以内联元素
显示,可以使用这个标签外挂。
1 | {% inlineImg [src] [height] %} |
Demo
1 | 你看我长得漂亮不 |