用Markdown快速排版一片文章

时间  2019-11-08
标签 markdown 快速 排版 一片 文章 栏目 Markdown 繁體版
原文   原文链接

 

前言


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

 

设置标题

 

多级标题


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

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


标题颜色和文字


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

示例以下：
java

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

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

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

 

文字居中


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

 

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

 

上面的实现方式以下：编辑器

 

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

 

上下空行符号


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

 

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

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

 

无序列表和有序列表

 

多级无序列表


使用 “-”+空格+内容；“-”也能够换作“+”；字体

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

多级列表示例：spa

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

实现以下：翻译

 

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

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

 

一级有序列表

 

鄙人并没查到多级有序列表的使用方法（包括官方文档在内）。
使用 “数字序号”+空格+英文输入法句点“.”；

多级列表示例：

  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 |逆序排列|


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


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

参数 详细解释 备注
-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实践而得。）
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程