这是一篇给自己的备忘录……
也顺便复习了下md语法……
Markdown是轻量级的一种标记语言,方便自己记忆也便于阅读,就类似“简化”了那种,不过不是全然替代Html的意思~只是另一种形式罢了,很多时候也需要html语言来辅助实现更多效果。
所有语法的输入都必须在英文状态下输入

基本语法

文本基本样式

粗体强调

1
2
**文字**
前后两个星号

效果:我是粗体

标题

标题有1-6级别

1
2
3
4
5
6
# 标题1
## 标题2
### 标题3
#### 标题4
##### 标题5
###### 标题6

效果:

标题1

标题2

标题3

标题4

标题5
标题6

斜体

1
2
*斜体文字*
斜体只需前后一个星号

效果:斜体字

删除线

1
2
~~狼呀浪~~
前后左右两个波浪号,注意要在英文输入法下

效果:我是删除线

删除线有时候没有反应的话也可写html语言:

1
<del>文字</del>

引用

1
> 引用文字内容

效果:

引用可用来写摘要关键词的地方

行内代码

这个有两种形式,一个是正文之间内嵌代码,比如:行内代码 ,语法是

1
`内嵌代码`

这个是在字母键上一排数字键的1前面的波浪号的前面顿号。
另一个是代码块预览,如果想放上其他语言的代码,如下:

1
2
```语言选择(如Html/PHP等) 
上下文都要带有三个小顿号

效果:

1
2
3
4
5
6
7
<p>这里选择的是html语言</p>
<div>
<ui>
<li>测试1</li>
<li>测试2</li>
</div>
<p>可以看到保留了缩进风格,如果是程序员可选择其他语言输入</p>

有序列表和无序列表

有序列表是前面有数字排序的,从1开始往下排,只需前面写 1. 2. 3. 这样,以此类推

1
2
3
1. 列表1
2. 列表2
3. 列表3

效果:

  1. 列表1
  2. 列表2
  3. 列表3

无序列表可用星号* 加号+ 减号- 形成无序列表

1
2
3
4
以减号作为示例
- 列表1
- 列表2
- 列表3

效果:

  • 列表1
  • 列表2
  • 列表3

分割线

语法:

1
2
3
4
* * *
***
*****
- - -

分割线都需要输入三个以上的符号,效果如:





不管用什么符号输入,都会形成一条横线,在符号里内不能输入其他字符

其他元素

链接

通常链接是这样:[名称](网址)
效果:我的个人站
是不是很简单,多么明了啊~也可以用<a href="https://sarakale.github.io"></a>

另一个是参考方式,相当于参考文献那种,正规来说是引用链接,文章最底处会列出参考的链接。

1
2
3
我现在写的这个文章参考了 [官方语法说明][1] 和 [Markdown 中文版语法说明][2] 。
[1]: https://daringfireball.net/projects/markdown/syntax "官方语法说明"
[2]: http://www.appinn.com/markdown/#philosophy "[Markdown 语法说明 (简体中文版)"

效果:
我现在写的这个文章参考了 官方语法说明Markdown 中文版语法说明

添加图片

图片可调用本地图片,不过现在大多都用图库外链来支持。
图片语法和上面链接有点类似,但是不同的是前面多了!
语法:

1
2
![图片名称](图片地址)
图片名称一般也可不写,图片地址注意最后要有完整后缀名喔~常见的有jpg、png、gif等。

效果:
我的头像

图片也有参考形式的语法,和上面链接一样,这里不再写了。

表格

表格的话稍微有点难懂,不过自己实践下就会明白哒!
语法是这样子:

1
2
3
4
| 名 称  | 名 称 | 名 称 |
|:------|-------|:-----|
| 羊肉串 | 千层饼 | 抹茶 |
| 豆沙包 | 鸡翅 | 可乐 |

效果:

名 称名 称名 称
羊肉串千层饼抹茶
豆沙包鸡翅可乐

表格也很简单的,上面最头是标题名称,中间一条虚线是在表示表格在分线,这个不能删,下面就可以写内容啦~
html是这样子:

1
2
3
4
5
6
7
8
9
10
11
<table>
<tr>
<th>名称</th><th>名称</th><th>名称</th>
</tr>
<tr>
<td>羊肉串</td><td>千层饼</td><td>抹茶</td>
</tr>
<tr>
<td>豆沙包</td><td>鸡翅</td><td>可乐</td>
</tr>
</table>

目前MD的表格还不支持合并单元格等操作,建议使用html语言来进行更多效果。

辅助使用

基本上大概就这些了,日常使用已经足够了。还有些能输入数学公式符号的,看起来很复杂……我也不常用那个就没试过。
记录下自己其他的需求代码:
字体大小与字体颜色:<font size="16px"></font><font color="red"></font>
颜色常用代码:blackredbluegreen#ccc#FF9966#eb5055#3399CC
居中对齐(针对图片):<center></center>

编辑器使用

markdown有时候不需要任何工具只需要记事本另存为.md格式即可,可上传到支持markdown语言的网站。
大多时候还是想看看生成的效果会是什么样子,目前windows、linux、OSX平台都有软件工具辅助。
我就只贴下Windows平台的吧……因为我只有一个win系统……
Windows平台
FarBox https://www.farbox.com/
Typora https://www.typora.io/
MarkdownPad http://www.markdownpad.com/
Smark http://git.oschina.net/elerao/Smark
MdCharm http://www.mdcharm.com/
……
可以看得出来windows平台也有这么多编辑器,其他平台也是一样的,你可以在你的系统商城上搜索看看~
当然也还有在线编辑,更加人性化的同步预览。

在线编辑器
dillinger http://dillinger.io/
MaHua http://mahua.jser.me/
Cmd Markdown https://www.zybuluo.com/mdeditor
马克飞象 https://maxiang.io/

编辑器只在于创作,适合自己就好。

主题样式

2018-12-01更换主题Next,它自带有特别样式。也看了一篇文章才发现。地址:好玩的写作样式
2020-02-23更换主题hexo-theme-butterfly,目前用该主题样式。

代码块

1
2
3
4
5
6
7
8
9
10
{% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}

分别为:标题、目标编程语言、链接、链接名称

也可以简写:
```[language] [title] [url] [link-text]
code
```

效果:

代码范例来源
1
2
3
4
5
6
7
8
9
10
11
<div class="sp-container">
<div class="sp-content">
<div class="sp-globe"></div>
<h2 class="frame-1">星空下</h2>
<h2 class="frame-2">月光</h2>
<h2 class="frame-3">照耀</h2>
<h2 class="frame-4">大地</h2>
<h2 class="frame-5"><span>啦啦啦</span> <span>啦啦啦啦</span></h2>
<a class="sp-circle-link" href="nav/index.html">进主页</a>
</div>
</div>

别忘了在主题设置开启代码高亮。

内嵌图片

主题中的图片都是默认以块级元素显示,如果需要内联元素显示,可以使用这个标签外挂。

1
2
//butterfly主题
{% inlineImg 图片链接 高度限制(可选) %}

效果:

这是我滴头像~
还可以用表情包~

Gallery相册

1
2
3
4
5
6
7
8
{% gallery %}
![](https://cdn.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg.jpg)
![](https://cdn.jsdelivr.net/gh/SaraKale/blogimg@0.1/cover/1.jpg)
![](https://cdn.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg8.jpg)
![](https://cdn.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg5.jpg)
![](https://cdn.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg3.jpg)
![](https://cdn.jsdelivr.net/gh/SaraKale/blogimg@0.1/cover/8.jpg)
{% endgallery %}

效果:

FontAwesome搭配文字

图标样式具体看官网FontAwesome

1
2
3
<i class="fa fa-pencil"></i> 记录
<i class="fa fa-play-circle"></i> 播放
<i class="fa fa-download"></i> 下载

效果:

  • 记录
  • 播放
  • 下载

居中引用文字

居中方式要看主题主持,之前用Next主题可以简单写标签外挂,现在换了主题只能用div方式了。

1
2
// html方式
<div style="text-align:center;font-family: 'Source Han Serif SC','Source Han Serif','source-han-serif-sc','PT Serif','SongTi SC','MicroSoft Yahei',Georgia,serif;font-size: 1.3em;line-height: 35px;">文字</div>

效果:

“人生如此艰难
不如偶尔装逼”

note 标签

1
2
3
4
// HTML方式
<div class="note default">文字</div>
// 标签方式
{% note default no-icon %}文字{% endnote %}

效果:

defaul no-icon

defaul

primary

success

info

warning

danger

主题标签:

success

info

warning

danger

success

info

也可搭配FontAwesome弄出好看的标签

下载

夏日烟火

书签

提醒

tabs标签按钮

只隐藏文字,单独的按钮

1
{% hideInline 文本内容,按钮显示文字,按钮背景颜色,按钮文字颜色 %}

效果:
今天的幸运色是什么呢? 红色

独立的block隐藏内容,可以隐藏很多内容,包括图片,代码块等等

1
2
3
{% hideBlock 按钮显示文字,按钮背景颜色,按钮文字颜色 %}
文本内容
{% endhideBlock %}

猜猜小伙伴去了哪里呢?
效果:


哎呀人家也不知道哇~

可以展示更多的内容,然后会变成收缩框,自己再点击就会展开了~

1
2
3
{% hideToggle 按钮显示文字,按钮背景颜色,按钮文字颜色 %}
文本内容
{% endhideToggle %}

效果:

あした来る日


春に咲く花 夏広がる空よ
心の中に 刻まれてきらめく
朝に降る雨 窓を閉ざす日にも
胸にあふれる光は 雲の上
よろこび悲しみ すべて抱いて歩いている
私の手と 君の手を 強くつなぐもの

tabs标签卡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% tabs test1 %}
<!-- tab 标签卡1 -->
**标签卡 1**
我的第二个兄弟在哪里?
<!-- endtab -->

<!-- tab 标签卡2 -->
**标签卡 2**
我是小二!
<!-- endtab -->

<!-- tab 标签卡3 -->
**标签卡 3**
我是第三个!
<!-- endtab -->
{% endtabs %}

效果:

标签卡 1
我的第二个兄弟在哪里?

标签卡 2
我是小二!

标签卡 3
我是第三个!

按钮

详见:https://butterfly.js.org/posts/4aa8abbe/#Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% 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
<span id="inline-toc">1.</span>

1.测试
2.测试
3.测试

高亮文字

1
2
3
4
{% label text color %}

text:文字
color:背景颜色,default/blue/pink/red/purple/orange/green

当初有些事,让我们刻骨铭心 ;曾经有些人,令我们难以释怀 。我们一路走来,告别一段往事 ,走入下一段风景。 在延伸,风景在变幻 ,人生没有不变的永恒。走远了再回头看,很多事已经模糊,很多人已经淡忘,只有很少的人与事与我们有关,牵连 牵连着我们的幸福与快乐,这才是我们真正要珍惜 的地方。

参考文章

[1]: 官方语法说明
[2]: Markdown 语法说明 (简体中文版)
[3]: wikipedia的介绍
[4]: CSS常用配色表
[5]: 打造个性超赞博客 Hexo+NexT+GitHubPages 的超深度优化