MarkDown的使用和总结

  Markdown 语法的目标是:成为一种适用于网络的书写语言,实现「易读易写」。你可以不必像专业编程人士一样要通过编写HTML网页,去排版才能写出有样式的文章,通过MarkDown你也可以写出排版优雅的文档。由于他的方便性和简单易写性,已经在各种网络环境得到支持和优化,国内比较常见的,例如简书和一些各种博客,国外可能过的比较多的,例如Github,主要是技术类的网站,甚至是可以编写wiki等的网页,都不同程度的支持和拥抱MarkDown。

常基本见的用法

举个栗子

标题

1
2
3
4
5
6
7
8
9
10
# h1
## h2
### h3
#### h4
##### h5
###### h6
标题一
==
标题二
--

效果:

h3

h4

h5
h6

本主题NexT会自动去读取并标题生成目录导航,为了更友好的显示它,因此去掉了一些影响效果(移动端暂无次效果)

加粗、重点标注、删除线

1
2
3
4
** Ctrl+Alt+N **
*** Ctrl+Alt+N ***
`Ctrl+Alt+N`
~~Jacks~~

效果:
** Ctrl+Alt+N ** * Ctrl+Alt+N *
Ctrl+Alt+N
Jacks

表格绘制

1
2
3
4
5
| 项目        | 价格   |  数量  | 备注|
| -------- | -----: | :----: |:----|
| 计算机 | $9999 | 10 |苹果类型|
| 手机 | $6000 | 5 ||
| 衣服 | $200 | 2000 ||

效果:

项目 价格 数量 备注
计算机 $9999 10 苹果类型
手机 $6000 5
衣服 $200 2000 西服

代码

用三个` 前后包起来即可,你甚至可以在后面写上用的哪种编程语言,可以更加友好的渲染上语法高亮
例如下面的JavaScript代码

效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  $(document).ready(function () {
var $sidebar = $('#sidebar');
var headerHeight = $('.header-inner').height();
var footerOffset = parseInt($('.main').css('padding-bottom'), 10);
var sidebarTop = headerHeight + 10;

$sidebar
.css({ 'margin-top': sidebarTop })
.show();

NexT.utils.isDesktop() && $('.page-post-detail .sidebar-inner').affix({
offset: {
top: sidebarTop,
bottom: footerOffset
}
});
});

引用

1
2
>大家好我是博主Jacks
>你可以看到在本文的排版中,博主有多次用到

效果:
大家好我是博主Jacks
你可以看到在前面的排版,博主有多次用到

#列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- 早上干了什么
+ 起床
+ 刷牙
+ 洗脸
+ 吃饭
- 晚上干了什么
+ 逛街
+ 去商场
* 买衣服
* 买鞋子
1. 买篮球鞋
2. 买高跟鞋
3. 买拖鞋
4. 买棉鞋
* 买裤子
+ 回家
- 明天呢
+ 吃饭
+ 睡觉

效果:

  • 早上干了什么
    • 起床
    • 刷牙
    • 洗脸
    • 吃饭
  • 晚上干了什么
    • 逛街
    • 去商场
    • 买衣服
    • 买鞋子
      1. 买篮球鞋
      2. 买高跟鞋
      3. 买拖鞋
      4. 买棉鞋
    • 买裤子
    • 回家
  • 明天呢
    • 吃饭
    • 睡觉

分隔线

1
2
***
---

效果:



链接, 图片和文档

1
2
3
4
5
6
7
8
9
10
11
12
[知乎](http://www.zhihu.com)
![MD](https://www.51201314.me/OSS/blog/img/markdown.png)

链接和图片的插入方法还可以用先插入’[]’,再通过另一个’[]’索引数字,在文章的最后提供索引地址的方法

[百度][1]
![][2]

在文章的最后的索引地址代码是

[1]:http://www.baidu.com
[2]:https://www.51201314.me/OSS/blog/img/MD.jpg

效果:

知乎
MD
百度

锚点

锚点的用法和加超链接是一样的,只不过是当前页面的位置链接,由于MarkDown是支持HTML标签的,所有我们只需要

1
2
3
4
[N](#idName)

//下面是你要跳到的位置
<a id='idName'></a>

效果:
点我会跳到开头

更多参考

http://wowubuntu.com/markdown/
[月光博客] http://www.williamlong.info/archives/4319.html
[少数派] http://sspai.com/25137

0%