用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>'」。 使用「 '」或「' '」 使用「</br>」將會空更多的行數，本文，標題先後都使用了「</br>」。以下： </br> #<font face="宋體" color="#1c6189">上下空行符號</font> </br>
無序列表和有序列表
多級無序列表
使用 「-」+空格+內容；「-」也能夠換作「+」；字體
第二級或者更多級別，只須要在「-」前對應的添加空格或者使用table鍵空格，來作顯示上的對齊。（其原理仍是第一級的使用方法，只不過前面加了空格做爲對齊，製造出顯示效果）動畫
多級列表示例：spa
- 此處寫文字
- 此處寫文字 //表明第二階
- 此處寫文字
- 此處寫文字 //表明三階
- 此處寫文字
- 此處寫文字
- 此處寫文字
實現以下：翻譯
多級列表
- 此處寫文字
- 此處寫文字 //表明第二階
- 此處寫文字
- 此處寫文字 //表明三階
- 此處寫文字
- 此處寫文字
- 此處寫文字
不要忘記「-」和內容之間有個空格
一級有序列表
鄙人並沒查到多級有序列表的使用方法（包括官方文檔在內）。
使用 「數字序號」+空格+英文輸入法句點「.」；
多級列表示例：
- 此處寫文字
- 此處寫文字
- 此處寫文字
實現以下：
1. 此處寫文字 2. 此處寫文字 3. 此處寫文字
不要忘記是英文句點，句點以後空一格或者使用table鍵空。
一級有序列表與多級無序列表摻雜使用
此處只不過是將上述兩種列表混搭了下（此處是有序列表在先）
多級列表示例：
- 此處寫文字
- 啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家
- 啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家
- 啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家
- 啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家啦啦啦我是賣報的小行家
- 此處寫文字
- 此處寫文字
實現以下：
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實踐而得。）
相關文章
- 1. markdown 文檔快速排版
- 2. 公衆號文章排版神器，Markdown一鍵排版，微信公號文章裏代碼的美化排版
- 3. 動畫:一篇文章快速學會快速排序
- 4. 【Markdown】使用Markdown Here插件一鍵排版md文件
- 5. 使用Latex排版一篇IEEE文章
- 6. 快速排序（白話版）——快速排序，快速搞定（Java版）
- 7. 第7章 快速排序
- 8. Python XML文件快速排版
- 9. Markdown: Basics （Markdown快速入門）
- 10. Markdown快速使用指南
- 更多相關文章...
- • Markdown 圖片 - Markdown 教程
- • SQL 快速參考 - SQL 教程
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
- • 三篇文章瞭解 TiDB 技術內幕 —— 說計算
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
