快速用Markdown排版一篇文章

 

前言

• 本文会将为每个设置的样式在文章中给出示例。
• 本文不介绍完整的Markdown用法。
• 本文只简洁的介绍，使用Markdown写一篇文章的用法。
• 本文主要记述鄙人在Mac电脑上使用博客园Markdown编辑器粗浅快捷的实践总结，后续会继续完善。

 

设置标题

 

多级标题

使用“#”+文字内容，代表#号后面的文字为一级标题，“##”代表二级标题，“###”代表三级标题，多级标题以此类推。

举个例子：“#前言” 就会生成上面的“前言”一级标题

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

标题颜色和文字

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

示例如下：

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

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

本文正文使用字体样式：<font face="宋体" size=3>

 

文字居中

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

 

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

 

上面的实现方式如下：

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

 

上下空行符号

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

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

使用“</br>”将会空更多的行数，本文，标题前后都使用了“</br>”。如下：
</br>

#<font face="宋体" color="#1c6189">上下空行符号</font>
</br>

 

无序列表和有序列表

 

多级无序列表

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

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

多级列表示例：

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

实现如下：

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

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

 

一级有序列表

 

鄙人并没查到多级有序列表的使用方法（包括官方文档在内）。

使用 “数字序号”+空格+英文输入法句点“.”；

多级列表示例：

1. 此处写文字
2. 此处写文字
3. 此处写文字

实现如下：

1. 此处写文字
2. 此处写文字
3. 此处写文字

不要忘记是英文句点，句点之后空一格或者使用table键空。

一级有序列表与多级无序列表掺杂使用

此处只不过是将上述两种列表混搭了下（此处是有序列表在先）

多级列表示例：

1. 此处写文字
   • 啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家
   • 啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家
     • 啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家
     • 啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家
2. 此处写文字
3. 此处写文字

实现如下：

1. 此处写文字
    - 啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家
    - 啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家
        - 啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家
        - 啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家啦啦啦我是卖报的小行家
2. 此处写文字
3. 此处写文字

 

超链接与锚

 

超链接

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

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

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

 

为超链接设置颜色

我是带颜色的超链接。设置如下

[<font color=#1c6189>我是带颜色的超链接<font>](http://www.cnblogs.com/zhouyubo/p/8410871.html)。

锚（文章内跳转）

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

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

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

前言标题设置如下：（此处将文字设置标签与锚标签嵌套）

#<font face="宋体" color="#1c6189"><span id="qianyan">前言</span></font>

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

跳转到指定文章的指定位置

 

其实是超链接（页间跳转）和锚（页内跳转）的结合实现。

废话不多说，点我跳转到Core Animation 文档翻译 （第六篇）中的小标题“显式动画帮助我们改变动画的参数”处。

Core Animation 文档翻译 （第六篇）中的小标题“显式动画帮助我们改变动画的参数”处是使用锚点设置的，只不过跳转的跳转的时候我们在http://www.cnblogs.com/zhouyubo/p/8422931.html后面拼接了锚点的跳转参数#xianshidonghuabangzhu。实际设置如下：

“显式动画帮助我们改变动画的参数”小标题写法如下：（此处将文字设置标签与锚标签嵌套）

#<font face="宋体" color="#1c6189"><span id="qianyan">显式动画帮助我们改变动画的参数</span></font>

点我跳转到Core Animation 文档翻译 （第六篇）中的小标题“显式动画帮助我们改变动画的参数”处设置如下：

[点我跳转到Core Animation 文档翻译 （第六篇）中的小标题“显式动画帮助我们改变动画的参数”处](http://www.cnblogs.com/zhouyubo/p/8422931.html#xianshidonghuabangzhu)

 

代码块

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

while(1)
{
    //代码块
}

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

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

 

分割线

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

---

上面的分割线实现如下

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

 

单个区块

这里写区块内容

实现如下：

>这里写区块内容

 

表格的插入和设置

 

表格的插入

参数	详细解释	备注
-l	use a long listing format	以长列表方式显示（显示出文件/文件夹详细信息）
-t	sort by modification time	按照修改时间排序（默认最近被修改的文件/文件夹排在最前面）
-r	reverse order while sorting	逆序排列

实现如下

| 参数 |详细解释|备注|
| - | - |
| -l | use a long listing format |以长列表方式显示（显示出文件/文件夹详细信息） |
| -t | sort by modification time |按照修改时间排序（默认最近被修改的文件/文件夹排在最前面） |
|-r | reverse order while sorting |逆序排列|

设置表格中某些列宽度为固定宽度

 

通过CSS设置宽度值，设置原理如下：

使用CSS调整某些列的宽度，设置原理中，第一列th:first-of-type，第二列th:nth-of-type(2)，第三列th:nth-of-type(2)，如是以此类推；

<style>
table th:first-of-type {
    width: 100px;
}

table th:nth-of-type(2) {
    width: 150px;
}
</style>

| 参数 |详细解释|备注|
| - | - | - |
| -l | use a long listing format |以长列表方式显示（显示出文件/文件夹详细信息） |
| -t | sort by modification time |按照修改时间排序（默认最近被修改的文件/文件夹排在最前面） |
|-r | reverse order while sorting |逆序排列|

设置表格中某些行的宽度为文章总宽度的百分比

其原理与上面设定某些列为固定值不同的是，将固定值换成占宽百分比

设置某些列占宽比原理如下：

<style>
table th:first-of-type {
    width: 30%;
}

table th:nth-of-type(2) {
    width: 30%;
}
</style>

| 参数 |详细解释|备注|
| - | - | - |
| -l | use a long listing format |以长列表方式显示（显示出文件/文件夹详细信息） |
| -t | sort by modification time |按照修改时间排序（默认最近被修改的文件/文件夹排在最前面） |
|-r | reverse order while sorting |逆序排列|

一片文章中多个表格，单个表格宽度控制

有时候，我们需要在单片文章内（包含多个表格）单独控制某个表格的各列的宽度比，示例：

.table2 tr th:first-child, .table2 tr td:first-child{
width: 30%;
}

.table2 th:nth-of-type(2) {
width: 15%;
}

参数	详细解释	备注
-l	use a long listing format	以长列表方式显示（显示出文件/文件夹详细信息）
-t	sort by modification time	按照修改时间排序（默认最近被修改的文件/文件夹排在最前面）

原理如下：（注意：每个表都设置为“tableX”，X为整数，且每个表的X在同一篇文章中的值不能相等）

<font face="宋体" size=3 class='table2'>有时候，我们需要在单片文章内（包含多个表格）单独控制某个表格的各列的宽度比，大致原理如下：

<style>
.table2 tr th:first-child, .table2 tr td:first-child{
    width: 30%;
}

.table2 th:nth-of-type(2) {
    width: 15%;
}

</style>

| 参数 |详细解释|备注|
| - | - | - |
| -l | use a long listing format |以长列表方式显示（显示出文件/文件夹详细信息） |
| -t | sort by modification time |按照修改时间排序（默认最近被修改的文件/文件夹排在最前面） | 

 

图片的插入和设置

 

插入图片

实现如下：

<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代码的方式实现的目录。本文提出的目录意是是指通过一级、二级以及三级标题形成的目录。

 

设置步骤：

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

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

 

生成目录代码

<script language="javascript" type="text/javascript">
//生成目录索引列表
function GenerateContentList()
{
    var jquery_h1_list = $('#cnblogs_post_body h1');
    if (jquery_h1_list.length == 0) { return; }
    if ($('#cnblogs_post_body').length == 0) { return; }

    var content = '<a name="_labelTop"></a>';
    content    += '<div id="navCategory">';
    content    += '<p style="font-size:18px;color:#1c6189"><b>目录</b></p>';
    // 一级目录 start
    content += '<ul class="first_class_ul">';

    for (var i = 0; i < jquery_h1_list.length; i++)
    {
        var go_to_top = '<div style="text-align: right"><a href="#_labelTop" style="color:#1c6189;" >回到顶部</a><a name="_label' + i + '"></a></div>';
        $(jquery_h1_list[i]).before(go_to_top);

        // 一级目录的一条
        var li_content = '<li><a href="#_label' + i + '" style="color:#1c6189; text-decoration:none;" >' + $(jquery_h1_list[i]).text() + '</a></li>';

        var nextH1Index = i + 1;
        if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; }
        var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h2");
        // 二级目录 start
        if (jquery_h2_list.length > 0)
        {
            //li_content +='<ul style="list-style-type:none;color:#1c6189;text-align: left; margin:2px 2px;">';
            li_content += '<ul class="second_class_ul">';
        }
        for (var j = 0; j < jquery_h2_list.length; j++)
        {
            var go_to_top2 = '<div style="text-align: right;color:#1c6189"><a name="_lab2_'+ i + '_' + j + '"></a></div>';
            $(jquery_h2_list[j]).before(go_to_top2);
            // 二级目录的一条
            li_content +='<li><a href="#_lab2_'+ i +'_' + j + '" style="color:#1c6189; text-decoration:none;" >' + $(jquery_h2_list[j]).text() + '</a></li>';

            var nextH2Index = j + 1;
            var next;
            if (nextH2Index == jquery_h2_list.length)
            {
                if (i + 1 == jquery_h1_list.length)
                {
                    next = jquery_h1_list[0];
                }
                else
                {
                    next = jquery_h1_list[i + 1];
                }
            }
            else
            {
                next = jquery_h2_list[nextH2Index];
            }
            var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h3");
            // 三级目录 start
            if (jquery_h3_list.length > 0)
            {
                li_content += '<ul class="third_class_ul">';
            }

            for (var k = 0; k < jquery_h3_list.length; k++)
            {
                var go_to_third_Content = '<div style="text-align: right;color:#1c6189"><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
                $(jquery_h3_list[k]).before(go_to_third_Content);
                // 三级目录的一条
                li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '" style="color:#1c6189; text-decoration:none;" >' + $(jquery_h3_list[k]).text() + '</a></li>';
            }

            if (jquery_h3_list.length > 0)
            {
                li_content += '</ul>';
            }
            li_content += '</li>';
            // 三级目录 end
        }
        if (jquery_h2_list.length > 0)
        {
            li_content +='</ul>';
        }
        li_content +='</li>';
        // 二级目录 end

        content += li_content;
    }
    // 一级目录 end
    content += '</ul>';
        content += '</div><p></p>';
        content += '<hr style="height:5px;border:none;border-top:1px dashed #1c6189;color:#1c6189"/>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }

}

GenerateContentList();
</script>
levels of contents

 

使用Tip

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