Markdown备忘
|字数总计:3.1k|阅读时长:13分钟|阅读量:|
文章参考：
Butterfly安装文档
Markdown文档
Markdown语法
文本类
标题
使用#表示标题
四级标题
五级标题
六级标题
1
2
3
4
5
6
| # Markdown语法
## 文本类
### 标题
#### 四级标题
##### 五级标题
###### 六级标题
|
强调
使用”_“或”*“表示斜体，”__“或”**“表示粗体，”~~“表示删除线
这个和__这个__都是粗体
这个和_这个_都是斜体
这个和___这个___同时是粗体和斜体
这是删除线
1
2
3
4
| **这个**和__这个__都是粗体
*这个*和_这个_都是斜体
***这个***和___这个___同时是粗体和斜体
~~这是删除线~~
|
引用
1
2
3
4
| >这是一级引用
>>这是二级引用
>>>- 这是带有部分**粗体**
>>>- 这是带有*斜体*的三级引用
|
链接
主要格式[text](url)
1
2
3
4
5
6
| [这是一个链接](https://ichika.cc)
[这是一个带说明的链接](https://ichika.cc "传送至主页")
快速链接<https://ichika.cc> <806708480@qq.com>
[引用型链接][1]
[1]: https://ichika.cc '主页'
*[**`语法嵌套`**](https://ichika.cc)*
|
其它
使用\可以进行转义
使用***创建分隔符
可以直接插入html代码
1
2
3
4
5
6
| 转义\* \[\]
***
分隔符
<div style="padding:10px;text-align:center;font-weight:bold">这是直接使用html的内容</div>
|
特殊区块
列表
使用”num.”的形式可构建有序列表
使用+、-、*可构建无序列表
有序列表格式中的数字不必顺序，但实际会顺序显示。
相同标识符的无序列表被视为同一个列表，不同标识符的无序列表被视为不同列表。可缩进表示子列表。
1
2
3
4
5
6
7
| 1. 这是有序列表
3. 这是有序列表
8. 这是有序列表
- 这是无序列表
* 这是无序列表
+ 这是无序列表
+ 这是无序子列表
|
代码
使用反单引号 ` 可表示代码，使用三反单引号 ```表示代码块，代码块起始符后可声明语言
对于有内部有引号的代码，可在标识符中多加几个反单引号。
这个是一个普通的代码再看看`这个`，这个是内部带引号的代码
1
2
3
4
5
| + `这个`是一个普通的代码
+ ``再看看`这个`，这个``是内部带引号的代码
```Test
这就是一个代码块了
```
|
图片
普通图片格式为
带超链接的图片格式为[
1
2
| 
[](https://ichika.cc)
|
Hexo&Butterfly专用格式
部分用法已被修改，专用于本博客使用，在其他场景下使用可能会失效。所有改动均已标注。
Note
默认模板
格式为{\% note [class] [no-icon] [style] %}
class 可选 可用值default / primary / success / info / warning / danger
no-icon 可选 不显示图标
class 可选 可用值simple / modern / flat / disabled
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| {% note success simple %}
这是simple类型
{% endnote %}
{% note info flat %}
这是flat类型
{% endnote %}
{% note primary modern %}
这是modern类型
{% endnote %}
{% note danger no-icon disable %}
这是simple no-icon类型
{% endnote %}
|
自定义模板
格式为{\% note [color] '[icon]' [style] %}
color 可选 可用值default / blue / pink / red / purple / orange / green
icon 可选 图标来源fontawesome
style 可选 可用值simple / modern / flat / disabled
1
2
3
4
5
6
7
8
9
10
11
| {% note default 'fab fa-cc-visa' simple %}
这是simple类型
{% endnote %}
{% note blue 'fas fa-bullhorn' flat %}
这是flat类型
{% endnote %}
{% note pink 'fas fa-car-crash' modern %}
这是modern类型
{% endnote %}
|
tag-hide
inline
点击后可显示隐藏内容，适用少量文本，格式为{% hideInline [content],[display],[bg],[color] %}
content 隐藏文本内容
display 可选 按钮所显示文字
bg 可选 按钮背景颜色
color 可选 按钮文字颜色
1
2
3
| {% hideInline 这是默认按钮 %}
{% hideInline 自定义一下,自定义,#33dd33,#dd3333 %}
|
Block
点击后可显示隐藏内容，适用大量各类内容，格式为{% hideBlock [display],[bg],[color] %}content{% endhideBlock %}
content 隐藏内容
display 可选 按钮所显示文字
bg 可选 按钮背景颜色
color 可选 按钮文字颜色
1
2
3
4
5
| {% hideBlock %}这是默认按钮{% endhideBlock %}
{% hideBlock 自定义,#33dd33,#dd3333 %}{% endhideBlock %}
{% endhideBlock %}
|
Toggle
可展开显示或隐藏内容，适用大量各类内容，格式为{% hideToggle [display],[bg],[color] %}content{% endhideToggle %}
content 隐藏内容
display 可选 按钮所显示文字
bg 可选 按钮背景颜色
color 可选 按钮文字颜色
1
2
3
| {% hideToggle %}这是默认按钮{% endhideToggle %}
{% hideToggle 自定义,#33dd33,#dd3333 %}{% endhideToggle %}
|
Tabs
可用于制作标签栏，格式：
1
2
3
4
5
6
7
8
9
| {% tabs [name],[index] %}
<!-- tab [tabname]-->
content
<!-- endtab -->
<!-- tab [tabname]-->
content
<!-- endtab -->
{% endtabs %}
|
index 可选 初始选择子栏序号，-1为全部折叠
tabname 可选 子栏名称
content 可选 文字内容
1
2
3
4
5
6
7
8
9
| {% tabs 演示tabs,2 %}
<!-- tab 自定义名称-->
test
<!-- endtab -->
<!-- tab -->
测试
<!-- endtab -->
{% endtabs %}
|
按钮，格式为{% btn '[url]',[text],[icon],[color] [style] [layout] [position] [size],[target] %}
url 链接
text 按钮所显示文字
icon 可选 按钮图标
color 可选 按钮背景颜色或边框和文字颜色，可用值default / blue / pink / red / purple / orange / green
style 可选 按钮样式，默认实心或outline描边
layout 可选 按钮布局，默认line或block
position 可选 按钮位置，须选择layout为block，默认左边或center / right
size 可选 按钮大小，默认或larger
target 可选 链接打开方式，默认\_self，可选\_blank / \_parent / \_top / framename
此格式已被修改，新增target标签，但不影响原格式用法。
请严格遵守格式，留空须保留逗号，空格符相隔的元素可乱序输入。
1
| {% btn 'https://ichika.cc',在新标签页中打开主页,,,_blank %}{% btn 'https://ichika.cc',主页,fas fa-home,pink outline %}{% btn 'https://ichika.cc',主页,,orange larger %}{% btn 'https://ichika.cc',主页,fas fa-home,blue larger outline block right %}
|
InlineImg
可以在文本中嵌入图片，格式为{% inlineImg [src] [height] %}
src 图片链接
height 可选 高度限制
我老婆网站的图标是
，すき！
什么你说你看不清？，够清楚了嘛！
1
2
| ~~我老婆~~网站的图标是{% inlineImg img/Page/favicon.png %}，すき！
什么你说你看不清？{% inlineImg img/Page/favicon.png 100px %}，够清楚了嘛！
|
Label
可以在文本中插入标签，格式为{% label [text] [color] %}
text 文字内容
color 可选 背景颜色，可用值default / blue / pink / red / purple / orange / green
使用label的段落可能会使Markdown标记失效，请尽量使用html。
在这句话当中，这是默认标签 ，这是彩色标签 ，这段是html
1
| 在这句话当中，{% label 这是默认标签 %}，{% label 这是彩色标签 pink %}，<b>这段是html</b>
|
Timeline
以时间轴的方式记录内容，格式：
1
2
3
4
5
6
7
8
| {% timeline [title],[color] %}
<!-- timeline [title] -->
content
<!-- endtimeline -->
<!-- timeline [title] -->
content
<!-- endtimeline -->
{% endtimeline %}
|
color 可选 主题颜色，可用值default / blue / pink / red / purple / orange / green
今天是2022年9月20日
那么明天就是9月21日了
今天是2022年9月21日
那么昨天就是9月20日了
1
2
3
4
5
6
7
8
9
10
| {% timeline 2022,pink %}
<!-- timeline 9.20 -->
今天是2022年9月20日
那么明天就是9月21日了
<!-- endtimeline -->
<!-- timeline 9.21 -->
今天是2022年9月21日
那么昨天就是9月20日了
<!-- endtimeline -->
{% endtimeline %}
|
flink
友情链接模板，在模板前后加入{% flink %}{% endflink %}
由于友链格式要求过于严格，本人尝试多次后只意外成功过一次，其余皆报错，极度不建议使用。
更逆天的是官方给的示例代码也报错
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
| {% flink %}
- class_name: 支持
class_desc:
link_list:
- name: Hexo
link: https://hexo.io/zh-cn/
avatar: /img/Article/Link/hexo.svg
descr: 框架支持
- name: Butterfly
link: https://butterfly.js.org/
avatar: /img/Article/Link/butterfly.png
descr: 主题提供
- name: Github
link: https://github.com/ichika99/ichika99.github.io/
avatar: /img/Article/Link/github.png
descr: 项目托管
- name: 阿里云
link: https://cn.aliyun.com/
avatar: /img/Article/Link/aliCloud.jpg
descr: 域名提供
- name: 腾讯云
link: https://cloud.tencent.com/
avatar: /img/Article/Link/tecentCloud.png
descr: 评论系统支持
- name: Twikoo
link: https://twikoo.js.org/
avatar: /img/Article/Link/twikoo.png
descr: 评论系统支持
- name: Vercel
link: https://vercel.com/
avatar: /img/Article/Link/Vercel.png
descr: 技术支持
{% endflink %}
|
ichikaの小窝专用样式
本部分为自定义样式，仅在该博客下使用。为防止与其他样式冲突，此样式均以ick开头。
插入视频
格式{% ickVideo [src] %}
1
| <video style="width:100%;" controls preload><source src='[src]'></video>
|
文字隐藏
可隐藏文字，鼠标悬浮时显示，格式{% ickHideTag [text] %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <span class="ickHideTag">[text]</span>
<style>
.ickHideTag{
background-color: black;
color: white;
padding: 0 5px;
border-radius: 5px;
}
.ickHideTag:hover{
color: white;
transition: .3s;
}
</style>
|
链接
链接使用特定样式，格式{% ickA [text],[url] %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <a class="ickA">[text]</a>
<style>
.ickA{
color:#49A6E9!important;
text-decoration:none!important;
padding:4px 5px 2px 5px;
border-bottom:2px solid #49A6E9;
}
.ickA:hover{
background-color:#49A6E9;
color:white!important;
border-radius:5px;
}
</style>
|
外链标签
格式{% ickBtn [target],[text],[url],[icon] %}
其中[target] 可选，为_target属性，并自动判断链接站点类型。
[target] 为网页图标，可选。
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
| <style>
.ickBtn {
width:310px;
height:70px;
background-color:var(--light-grey);
border:1px solid var(--dark-grey);
border-radius:12px;
padding:5px 10px;
margin:15px auto;
position:relative;
transition:0.3s;
}
.ickBtn:hover{
background-color:var(--ichika-color);
border:1px solid var(--ichika-color);
box-shadow:0 0 15px var(--ichika-color);
width:350px;
transition:0.3s;
}
.ickBtn:hover .ickBtn-goto{
display:inline;
transition:0.3s;
}
.ickBtn:hover .ickBtn-sitename,.ickBtn:hover .ickBtn-sitetype{
color:white;
transition:0.3s;
}
.ickBtn > a{
display:flex;
text-decoration:none!important;
color:var(--font-color)!important;
}
.ickBtn-imgbox{
height:50px;
width:50px;
background-size:cover;
margin:auto 10px;
border-radius:50%;
}
.ickBtn-goto{
height:14px;
position:absolute;
right:15px;
top:28px;
color:white;
display:none;
}
.ickBtn-infobox{
height:100%;
padding-left:10px;
width:220px;
}
.ickBtn-sitename,.ickBtn-sitetype{
width:100%;
display:flex;
}
.ickBtn-sitetype{
border-bottom: 1px dashed var(--dark-grey);
line-height:16px;
font-size:12px;
}
.ickBtn-sitename{
font-weight:bold;
line-height:40px;
}
</style>
<div class="ickBtn">
<a href="[url]" target="[target]">
<div class="ickBtn-imgbox" style="background:url([icon]);background-size:cover;"></div>
<div class="ickBtn-infobox">
<div class="ickBtn-sitetype">
[target]
</div>
<div class="ickBtn-sitename">
[text]
</div>
</div>
<div class="ickBtn-goto fas fa-chevron-right">
</div>
</a>
</div>
|
主页
GitHub线路
腾讯云线路
，すき！
最新评论