用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;'”或“'&#160;'”

使用“</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 |逆序排列|

一片文章中多個表格，單個表格寬度控制

有時候，我們需要在單片文章內（包含多個表格）單獨控制某個表格的各列的寬度比，示例：

參數	詳細解釋	備注
-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實踐而得。）