快速用Markdown排版一篇文章

前言

如果想先看下效果可以参见鄙人使用Markdown的排版的一篇文章——Markdown编辑效果。
本文会将每个设置在文内做示例。
本文不介绍完整的Markdown用法。
本文只简洁的介绍，使用Markdown写一篇文章的用法。
本文主要记述鄙人在Mac电脑上使用博客园Markdown编辑器的实践总结，后续还会继续完善。
本文最后将会把此文的Markdown编辑源内容展现出来。

设置标题

多级标题

使用“#”+文字内容，代表#号后面的文字为一级标题，“##”代表二级标题，“###”代表三级标题，多级标题以此类推。
举个例子：“#前言” 就会生成上面的“前言”一级标题

文中的“设置标题”和“多级标题”设置基础方式如下
#设置标题    //一级标题
##多级标题   //二级标题

标题颜色和文字

使用font标签来设置字体，通过font标签内设置键值对来确定字体样式。face="宋体"代表了font标签对内字体使用宋体；color="#1c6189"代表指明font标签对内字体使用的颜色。

示例如下：

一级标题颜色字体的设置
#<font face="宋体" color="#1c6189">设置标题</font>

本文二级标题和正文都使用的默认字体颜色

文字居中

要想某些文字居中（尤其是图片的上标题），示例如下：

我是居中的文字，你认识我么，加下我吧，有问题交流啊，嘎嘎

上面的实现方式如下：

<center>我是居中的文字，你认识我么，加下我吧，有问题交流啊，嘎嘎</center>

上下空行符号

为了更优美的展现文章，标题和正文之间需要空行。空行有一下集中方式：

使用标签“'</br>'”。
使用“&nbsp;'”或“'&#160;'”

使用“</br>”将会空更多的行数，本文，标题前后都使用了“</br>”。如下：
</br>
#<font face="宋体" color="#1c6189">上下空行符号</font>
</br>

多级无序列表

使用 “-”+空格+内容；“-”也可以换做“+”；

第二级或者更多级别，只需要在“-”前对应的添加空格或者使用table键空格，来做显示上的对齐。（其原理还是第一级的使用方法，只不过前面加了空格作为对齐，制造出显示效果）

多级列表示例：

此处写文字
- 此处写文字 //代表第二阶
- 此处写文字
  - 此处写文字 //代表三阶
此处写文字
此处写文字
- 此处写文字

实现如下：

多级列表
- 此处写文字
    - 此处写文字     //代表第二阶
    - 此处写文字
        - 此处写文字 //代表三阶
- 此处写文字
- 此处写文字
    - 此处写文字

不要忘记“-”和内容之间有个空格

超链接与锚

超链接

插入超链接方法使用“[]"括号内写我们要显示的文字，紧接着使用"()"括号内要写链接网址。注意"[]"和"()"小括号都是在英文输入法下输入的符号。

跳转到CoreAnimation第四篇的设置如下：

[跳转到CoreAnimation第四篇](http://www.cnblogs.com/zhouyubo/p/8410871.html)。

锚（文章内跳转）

锚就是为了实现文章内部的跳转，使用锚需要设置两步。（与超链接类似）

在跳转的目的地添加标签。
在需要被设置为点击跳转的文字处，添加上步设置的标签。

示例超链接点我跳转到前言——具体设置如下：

前言标题设置如下：（此处将文字设置标签与锚标签嵌套）
#<font face="宋体" color="#1c6189"><span id="qianyan">前言</span></font>

要设置为跳转的文字设置如下
[点我跳转到前言](#qianyan)

代码块

代码块的设置是在切换到英文输入法下，“ ` ”符号——即使用Esc按键下方的按键输入的符号，输入3次，作为开始和结束。

while(1)
{
    //代码块
}

上面代码块是这么写的：（下面的最前面的“//”需要去掉）

//```
//while(1)
//{
//    //代码块
//}
//```

分割线

分割线是在新的通过“-”+空格+“-”+空格+“-”设置的。

上面的分割线实现如下

- - -  //注意相邻的“-”中间都有空格

图片的插入和设置

插入图片

实现如下：

<img src="http://images2017.cnblogs.com/blog/764024/201802/764024-20180205162555654-1350503259.jpg" />

图片居中

在插入图片基础上加上center标签：

实现如下：

<center>
<img src="http://images2017.cnblogs.com/blog/764024/201802/764024-20180205162555654-1350503259.jpg" />
</center>

指定图片尺寸

只需要在src 后面添加上width和height对应的值：

实现如下：

<center>
<img src="http://images2017.cnblogs.com/blog/764024/201802/764024-20180205162555654-1350503259.jpg" width=300 height=181.5 />
</center>

目录的生成

查了不少方法，最终本文采用了页脚Html代码的方式实现的目录。本文提出的目录意是是指通过一级和二级标题形成的目录，至于想要设置包含3级或者更多级别的目录，可以通过修改下面提供的页脚Html代码来实现。

设置步骤：

在“管理”-“设置”-“页脚Html代码”，将生成目录代码粘贴到其中，并保存。
在“管理”-“设置”-“页面定制CSS代码”，将目录中行间距调整代码粘贴到其中，并保存。（此步骤只是为了美化，调整目录中文字的行间距，可只执行第一步。）
初次设置的需要先申请“支持js代码”，在“设置”下面，申请支持js代码位置如下图所示：

点击后会弹出申请理由文本框，填写申请理由即可，一般申请支持js在1-2个小时之内就会通过。

生成目录代码

<script language="javascript" type="text/javascript">
// 生成目录索引列表

function GenerateContentList()
{
    var mainContent = $('#likecs_post_body');
    var h2_list = $('#likecs_post_body h1');//如果你的章节标题不是h2,只需要将这里的h2换掉即可

    if(mainContent.length < 1)
        return;
 
    if(h2_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content += '<div id="navCategory" style="color:#1c6189;">';
        content += '<p style="color:#1c6189; font-size:18px;"><b>目录</b></p>';
        content += '<style type="text/css">';
        content += 'ul,li{list-style-type:none; margin:0; padding:0}';
        content +='</style>';
        content += '<ul type="circle" style="margin-top:0px" padding-top:"6px";>';
        for(var i=0; i<h2_list.length; i++)
        {
            var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#1c6189; text-decoration:none;">回到顶部</a><a name="_label' + i + '"></a></div>';
            $(h2_list[i]).before(go_to_top);
            
            var h3_list = $(h2_list[i]).nextAll("h2");
            var li3_content = '';
            for(var j=0; j<h3_list.length; j++)
            {
                var tmp = $(h3_list[j]).prevAll('h1').first();
                if(!tmp.is(h2_list[i]))
                    break;
                var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
                $(h3_list[j]).before(li3_anchor);
                li3_content += '<li style="line-height:20px"><a href="#_label' + i + '_' + j + '" style="color:#1c6189; text-decoration:none;">' + $(h3_list[j]).text() + '</a></li>';
            }
            
            var li2_content = '';
            if(li3_content.length > 0)
                li2_content = '<li style="line-height:20px"><a href="#_label' + i + '" style="color:#1c6189; text-decoration:none;">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
            else
                li2_content = '<li style="line-height:20px"><a href="#_label' + i + '" style="color:#1c6189; text-decoration:none;">' + $(h2_list[i]).text() + '</a></li>';
            content += li2_content;
        }
        content += '</ul>';
        content += '</div><p>&nbsp;</p>';
        content += '<hr style="height:5px;border:none;border-top:1px dashed #1c6189;color:#1c6189"/>';
        if($('#likecs_post_body').length != 0 )
        {
            $($('#likecs_post_body')[0]).prepend(content);
        }
    }   
}

GenerateContentList();
</script>

目录中行间距调整代码

.postBody li, .postCon li{
margin-top:1em;
}

实用中的小细节

当正确使用Markdown编辑器的标签时候，如果某标签没有达到想要的展现效果，可以在编辑源文章的时候将此标签上下都通过按Enter空出一行。
由于Markdown在的某些细节语义各个平台以及编辑APP中都有可能不同，所以当真的有实现不了的时候，还需自行查找。（本文是基于Mac、博客园Markdown实践而得。）