【干货】Markdown编辑博文，公式图片轻松搞定

*:first-child {
margin-top: 0 !important;
}

body>*:last-child {
margin-bottom: 0 !important;
}

/* BLOCKS
=============================================================================*/

p, blockquote, ul, ol, dl, table, pre {
margin: 15px 0;
}

/* HEADERS
=============================================================================*/

h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
font-size: inherit;
}

h1 {
font-size: 28px;
color: #000;
}

h2 {
font-size: 24px;
border-bottom: 1px solid #ccc;
color: #000;
}

h3 {
font-size: 18px;
}

h4 {
font-size: 16px;
}

h5 {
font-size: 14px;
}

h6 {
color: #777;
font-size: 14px;
}

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
margin-top: 0;
padding-top: 0;
}

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0;
}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
margin-top: 10px;
}

/* LINKS
=============================================================================*/

a {
color: #4183C4;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

/* LISTS
=============================================================================*/

ul, ol {
padding-left: 30px;
}

ul li > :first-child,
ol li > :first-child,
ul li ul:first-of-type,
ol li ol:first-of-type,
ul li ol:first-of-type,
ol li ul:first-of-type {
margin-top: 0px;
}

ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
}

dl {
padding: 0;
}

dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}

dl dt:first-child {
padding: 0;
}

dl dt>:first-child {
margin-top: 0px;
}

dl dt>:last-child {
margin-bottom: 0px;
}

dl dd {
margin: 0 0 15px;
padding: 0 15px;
}

dl dd>:first-child {
margin-top: 0px;
}

dl dd>:last-child {
margin-bottom: 0px;
}

/* CODE
=============================================================================*/

pre, code, tt {
font-size: 12px;
font-family: Consolas, "Liberation Mono", Courier, monospace;
}

code, tt {
margin: 0 0px;
padding: 0px 0px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}

pre>code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}

pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}

pre code, pre tt {
background-color: transparent;
border: none;
}

kbd {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DDDDDD;
background-image: linear-gradient(#F1F1F1, #DDDDDD);
background-repeat: repeat-x;
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
border-image: none;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
padding: 1px 4px;
}

/* QUOTES
=============================================================================*/

blockquote {
border-left: 4px solid #DDD;
padding: 0 15px;
color: #777;
}

blockquote>:first-child {
margin-top: 0px;
}

blockquote>:last-child {
margin-bottom: 0px;
}

/* HORIZONTAL RULES
=============================================================================*/

hr {
clear: both;
margin: 15px 0;
height: 0px;
overflow: hidden;
border: none;
background: transparent;
border-bottom: 4px solid #ddd;
padding: 0;
}

/* TABLES
=============================================================================*/

table th {
font-weight: bold;
}

table th, table td {
border: 1px solid #ccc;
padding: 6px 13px;
}

table tr {
border-top: 1px solid #ccc;
background-color: #fff;
}

table tr:nth-child(2n) {
background-color: #f8f8f8;
}

/* IMAGES
=============================================================================*/

img {
max-width: 70%
}
-->

Markdown 使用操作手册

---

作者：白宁超

Blog：伏草唯存

Markdown 是一种轻量级的「标记语言」，它的优点很多，目前也被越来越多的写作爱好者，撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑，Markdown 的语法十分简单。常用的标记符号也不超过十个，这种相对于更为复杂的 HTML 标记语言来说，Markdown 可谓是十分轻量的，学习成本也不需要太多，且一旦熟悉这种语法规则，会有一劳永逸的效果。Markdown下载地址。如果右侧不能即使显示请下载安装awesomium

1 兼容HTML

1.1 HTML在MD中的dome

Foo	Foo	Foo
Foo	Foo	Foo

1.2 HTML中的特殊字符自动转换

& 字符:
链接:http://images.google.com/images?num=30&q=larry+bird 自动转换:
http://images.google.com/images?num=30&q=larry+bird

< 符号:
1<2 自动转化： 1<2

©符号改写：: 自动转化 ©

建议|总结

采用MD内置标签比较复杂的时候,可以考虑采用HTML编辑

---

2 区块元素

2.1 段落和换行

换行采用br

2.2 标题

类 Setext 形式是用底线的形式，利用 = （最高阶标题）和 - （第二阶标题）

This is an H1

This is an H2

类 Atx 形式则是在行首插入 1 到 6 个 #

这是 H1

这是 H2

这是 H3

这是 H4

这是 H5

这是 H6

2.3 区块引用

每行的最前面加上 >

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

区块引用可以嵌套（例如：引用内的引用），只要根据层次加上不同数量的 >

This is the first level of quoting.

This is nested blockquote.

Back to the first level.

引用的区块包括标题、列表、代码区块等：

这是一个标题。

1. 这是第一行列表项。
2. 这是第二行列表项。

给出一些例子代码：

 return shell_exec("echo $input | $markdown_script");

2.4 列表

无序列表使用星号、加号或是减号作为列表标记

• Red
• Blue
• Blue

有序列表则使用数字接着一个英文句点

1. Bird
2. McHale
3. Parish

HTML 标记

1. Bird
2. McHale
3. Parish

列表项目可以包含多个段落，每个项目下的段落都必须缩进 4 个空格或是 1 个制表符：

1. This is a list item with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.

   Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. Donec sit amet nisl. Aliquam semper ipsum sit amet velit.

2. Suspendisse id sem consectetuer libero luctus adipiscing.

如果要放代码区块的话，该区块就需要缩进两次，也就是 8 个空格或是 2 个制表符：

• 一列表项包含一个列表区块：

  <代码写在这>
  

在行首出现数字-句点-空白，要避免这样的状况，你可以在句点前面加上反斜杠。

1986. What a great season.

2.5 代码区块

段落：缩进 4 个空格或是 1 个制表符，或者html中的p标签:

这是一个代码区块。

代码块

code标签代码块

这是一个代码区块。

`代码块

这是一个代码区块。

2.6 分隔线

用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。

---

---

建议|总结

1 标题采用多个 num#
2 段落采用<br/>
3 引用采用>
4 段落采用tab键
5 区块采用(`)或者<code/>
6 有序列表采用1.无序列表采用*
7 分割线采用***

---

3 区段元素

3.1 链接

行内式和参考式两种形式。[]里面是链接文本内容,()里面是网站,""里面是提示信息

行内链接

1. This is an example inline link.
   等于

   This is an example inline link.

2. This link has no title attribute.
   
   等于

   This link has no
   title attribute.

定义链接：

Visit Daring Fireball for more information.

参考式链接

I get 10 times more traffic from Google than from
Yahoo or MSN.

改成用链接名称的方式写：

I get 10 times more traffic from Google than from
Yahoo or MSN.

或者采用

I get 10 times more traffic from Google
than from Yahoo or
MSN.

3.2 强调

Markdown 使用星号（*）和底线（_）作为标记类似em符号。

single asterisks

single underscores
Markdown 使用星号（**）和底线（__）作为标记类似strong符号。

double asterisks

double underscores

如果要在文字前后直接插入普通的星号或底线，你可以用反斜线：

*this text is surrounded by literal_asterisks*

建议:

1. 使用 **加粗**，而不是 __加粗__
2. 使用 *斜体*，而不是 _斜体_
3. 使用 ***粗斜***，而不是 **_粗斜_** 等

3.3 图片

行内式图片

详细叙述如下：

一个惊叹号 ! 接着一个方括号，里面放上图片的替代文字 接着一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上 选择性的 'title' 文字。

参考式的图片

注意：到目前为止， Markdown 还没有办法指定图片的宽高，如果你需要的话，你可以使用普通的 img 标签。

显示链接中带括号的图片

3.4 自动链接

Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱,只要是用尖括号包起来,Markdown 就会自动把它转成链接。如：

http://example.com/ Markdown 会转为： http://example.com/

邮址例子:

address@example.com Markdown 会转成：

ss@example.co
m">address@exa mple.com

3.5 表格

| Tables        | Are           | Cool      |
| ------------- |---------------| ----------|
| col 3 is      | right-aligned | $1600     |
| col 2 is      | centered      |   $12     |
| zebra stripes | are neat      |    $1     |

表格案例

name    age     sex
————————————————————
bnc     18      man
bnc     18      man
bnc     18      man

3.6 层次

#### 第一章
1. 第一节
* 第二节(你不用敲 "2"，自动就有了）
    * 第一小节（推荐每层次缩进四个空格）
        * 小小节 1
        * 小小节 2
    * 第二小节

建议|总结

1 链接:[an example](http://example.com/ "Title") 和 [google]: http://google.com/        "Google"
2 强调:**粗体**  *斜体*   ***粗斜***
3 图片:![图片的替代文字](http://pic28.nipic.com/20130424/11588775_115415688157_2.jpg "图片提示")和![Alt text][id]
[id]: http://img05.tooopen.com/images/20150531/tooopen_sy_127457023651.jpg  "Optional title attribute"
4 自动链接:<http://example.com/>
5 表格:建议使用html书写

---

4 字体设置

4.1 字体大小、字号与颜色设置

我是黑体字
我是微软雅黑
我是华文彩云
黑体
我是宋体
我是灰色宋体

背景色:我是黑体字
这里的背景色是：OrangeRed， 十六进制颜色值：#FF4500， rgb(255, 69, 0)

大小设置: 1 - 7 的数字。浏览器默认值是 3。

颜色设置：color色彩选择器

---

5 编辑公式

5.1 方式一:适合html网页显示

1 MarkdownPad中点击"Tools > Options > Advanced > HTML Head Editor"。添加下列内容:

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

2 打开LaTex公式编辑器
3 完成公式编辑,并负责自动生成的内容
4 $$复制公式$$
5 F6运行即可html中预览

公式示例

1 $$ f(x)=\sum \frac{a}{b} $$

2 $$ x^{y^z}=(1+{\rm e}^x)^{-2xy^w} $$

3 $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$

5.2 方式二:适合即时显示,PDF,html网页显示

1 打开LaTex公式编辑器
2 完成公式编辑,并负责自动生成的内容
3 完成如下步骤

<a href="http://www.codecogs.com/eqnedit.php?latex=x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}" target="_blank"><img src="http://latex.codecogs.com/gif.latex? 复制公式 " title=" 提示信息 " /></a>

公式示例

---

6 常用快捷键

1 Ctrl + I ： 斜体

测试斜体

2 Ctrl + B ： 粗体

测试粗体

3 Ctrl + G ： 图片

4 Ctrl + Q ： 引用

测试引用

Ctrl + 1-6 ： 标题 1-6

测试标题1-6

5 Ctrl + K ： 代码块

测试代码块

6 Ctrl + L ： 超链接

http://www.baidu.com

7 Ctrl + T ： 时间戳

5/22/2017 7:21:56 PM

8 Ctrl + U ： 无序列表

• 55
• 66
• 77

9 Ctrl + R ： 水平标尺

---

10 F4 ： 启用水平布局

11 F5 ： 启用实时预览

12 F6 ： 在浏览器中预览

13 Ctrl + Shift + O ： 有序列表

1. 22
2. 33

14 Ctrl+Shift+1 导出HTML 15 Ctrl+Shift+2 导出PDF

7 参考文献

[1] Markdown 语法说明 (简体中文版)
[2] Markdown 公式指导手册
[3] LaTex公式编辑器
[4] Markdown输入数学公式

[5] 在线配置LaTex