这是一篇给自己的备忘录……
也顺便复习了下md语法……
目前我是借助EditorMD插件来实时预览看自己写后的效果,大部分功能已足够满足。而且使用快捷键真的好方便!
Markdown是轻量级的一种标记语言,方便自己记忆也便于阅读,就类似“简化”了那种,不过不是全然替代Html的意思~只是另一种形式罢了,很多时候也需要html语言来辅助实现更多效果。
所有语法的输入都必须在英文状态下输入

基本语法

文本基本样式

粗体强调

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

效果:我是粗体
快捷键:Ctrl + B

标题

标题有1-6级别

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

效果:

标题1

标题2

标题3

标题4

标题5
标题6

快捷键:Ctrl + 1~6

斜体

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

效果:斜体字
快捷键:Ctrl + I

删除线

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

效果:我是删除线
快捷键:Ctrl + Shift + S
删除线有时候没有反应的话也可写html语言:

1
<del>文字</del>

引用

1
> 引用文字内容

效果:

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

快捷键:Ctrl + Shift + Q

行内代码

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

1
`内嵌代码`

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

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>

快捷键:Shift + Alt + C

有序列表和无序列表

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

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

效果:

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

快捷键:Ctrl + Shift + O

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

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

效果:

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

前面都有小圆圈,快捷键:Ctrl + U

分割线

语法:

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

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





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

其他元素

链接

通常链接是这样:[名称](网址)
效果:我的个人站
是不是很简单,多么明了啊~也可以用<a href="https://sarakale.github.io"></a>
快捷键:Ctrl + L
另一个是参考方式,相当于参考文献那种,正规来说是引用链接,文章最底处会列出参考的链接。

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等。

效果:
我的头像

快捷键:Ctrl + Shift + I
图片也有参考形式的语法,和上面链接一样,这里不再写了。

表格

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

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,它自带有特别样式。也看了一篇文章才发现。地址:好玩的写作样式

代码块

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
{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

效果:

1
2
3
4
5
6
7
若要突破宽度限制
//HTML方式
<img src="image-url" class="full-image" />
//标签方式,要求版本在0.4.5或以上
{% fullimage /image-url, alt, title %}
// 简写
{% fi /image-url, alt, title %}

效果:

看月亮

FontAwesome搭配文字

图标样式具体看官网 FontAwesome

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

效果:

  • 记录
  • 播放
  • 下载

居中引用文字

1
2
3
4
5
6
7
8
9
// html方式
<blockquote class="blockquote-center">文字</blockquote>
// 标签方式,要求版本在0.4.5或以上
{% centerquote %}blah blah blah{% endcenterquote %}
// 简写方式
{% cq %}
人生如此艰难
不如偶尔装逼
{% endcq %}

效果:

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

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

tabs标签卡

1
2
3
4
5
6
7
8
9
10
11
{% tabs 选项卡, 1 %}
<!-- tab -->
**标签卡 1** 我的第二个兄弟在哪里?
<!-- endtab -->
<!-- tab -->
**标签卡 2** 我是小二!
<!-- endtab -->
<!-- tab -->
**标签卡 3** 我是第三个!
<!-- endtab -->
{% endtabs %}

效果:

  • 我的第二个兄弟在哪里?
  • 我是小二!
  • 我是第三个!

要在主题配置提前开启:

位置:~/blog/themes/next/_config.yml
1
2
3
4
5
6
7
# Tabs tag.
tabs:
enable: true
transition:
tabs: true
labels: true
border_radius: 0

按钮

1
2
{% button #, Text %}
{% btn https://www.baidu.com, Baiduyun, download fa-lg fa-fw %}

效果:

数字块

1
<span id="inline-toc">1.</span>

1.测试

关于Next样式更多详见:Github lssuesHexo Theme Next Test

参考文章

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