目錄
前言
- 本文會(huì)將為每個(gè)設(shè)置的樣式在文章中給出示例沃缘。
- 本文不介紹完整的Markdown用法秧了。
- 本文只簡(jiǎn)潔的介紹,使用Markdown寫一篇文章的用法涯捻。
- 本文主要記述鄙人在Mac電腦上使用博客園Markdown編輯器粗淺快捷的實(shí)踐總結(jié)鳄炉,后續(xù)會(huì)繼續(xù)完善阐虚。
設(shè)置標(biāo)題
多級(jí)標(biāo)題
使用“#”+文字內(nèi)容,代表#號(hào)后面的文字為一級(jí)標(biāo)題启摄,“##”代表二級(jí)標(biāo)題稿壁,“###”代表三級(jí)標(biāo)題,多級(jí)標(biāo)題以此類推歉备。
舉個(gè)例子:“#前言” 就會(huì)生成上面的“前言”一級(jí)標(biāo)題
文中的“設(shè)置標(biāo)題”和“多級(jí)標(biāo)題”設(shè)置基礎(chǔ)方式如下
#設(shè)置標(biāo)題 //一級(jí)標(biāo)題
##多級(jí)標(biāo)題 //二級(jí)標(biāo)題
標(biāo)題顏色和文字
使用font標(biāo)簽來設(shè)置字體傅是,通過font標(biāo)簽內(nèi)設(shè)置鍵值對(duì)來確定字體樣式。face="宋體"代表了font標(biāo)簽對(duì)內(nèi)字體使用宋體;color="#1c6189"代表指明font標(biāo)簽對(duì)內(nèi)字體使用的顏色落午。
示例如下:
一級(jí)標(biāo)題顏色字體的設(shè)置
#<font face="宋體" color="#1c6189">設(shè)置標(biāo)題</font>
本文二級(jí)標(biāo)題和正文都使用的默認(rèn)字體顏色
本文正文使用字體樣式:<font face="宋體" size=3>
文字居中
要想某些文字居中(尤其是圖片的上標(biāo)題)谎懦,示例如下:
<center style="margin: 0px; padding: 0px;">我是居中的文字,你認(rèn)識(shí)我么溃斋,加下我吧界拦,有問題交流啊,嘎嘎</center>
上面的實(shí)現(xiàn)方式如下:
<center>我是居中的文字梗劫,你認(rèn)識(shí)我么享甸,加下我吧,有問題交流啊梳侨,嘎嘎</center>
上下空行符號(hào)
為了更優(yōu)美的展現(xiàn)文章蛉威,標(biāo)題和正文之間需要空行∽卟福空行有一下集中方式:
使用標(biāo)簽“'</br>'”蚯嫌。
使用“ '”或“' '”
使用“</br>”將會(huì)空更多的行數(shù),本文丙躏,標(biāo)題前后都使用了“</br>”择示。如下:
</br>
#<font face="宋體" color="#1c6189">上下空行符號(hào)</font>
</br>
無序列表和有序列表
多級(jí)無序列表
使用 “-”+空格+內(nèi)容;“-”也可以換做“+”晒旅;
第二級(jí)或者更多級(jí)別栅盲,只需要在“-”前對(duì)應(yīng)的添加空格或者使用table鍵空格,來做顯示上的對(duì)齊废恋。(其原理還是第一級(jí)的使用方法谈秫,只不過前面加了空格作為對(duì)齊,制造出顯示效果)
多級(jí)列表示例:
- 此處寫文字
- 此處寫文字 //代表第二階
- 此處寫文字
- 此處寫文字 //代表三階
- 此處寫文字
- 此處寫文字
- 此處寫文字
實(shí)現(xiàn)如下:
多級(jí)列表
- 此處寫文字
- 此處寫文字 //代表第二階
- 此處寫文字
- 此處寫文字 //代表三階
- 此處寫文字
- 此處寫文字
- 此處寫文字
不要忘記“-”和內(nèi)容之間有個(gè)空格
一級(jí)有序列表
鄙人并沒查到多級(jí)有序列表的使用方法(包括官方文檔在內(nèi))鱼鼓。
使用 “數(shù)字序號(hào)”+空格+英文輸入法句點(diǎn)“.”拟烫;
多級(jí)列表示例:
- 此處寫文字
- 此處寫文字
- 此處寫文字
實(shí)現(xiàn)如下:
1\. 此處寫文字
2\. 此處寫文字
3\. 此處寫文字
不要忘記是英文句點(diǎn),句點(diǎn)之后空一格或者使用table鍵空迄本。
一級(jí)有序列表與多級(jí)無序列表?yè)诫s使用
此處只不過是將上述兩種列表混搭了下(此處是有序列表在先)
多級(jí)列表示例:
- 此處寫文字
- 啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家
- 啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家
- 啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家
- 啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家
- 此處寫文字
- 此處寫文字
實(shí)現(xiàn)如下:
1\. 此處寫文字
- 啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家
- 啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家
- 啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家
- 啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家啦啦啦我是賣報(bào)的小行家
2\. 此處寫文字
3\. 此處寫文字
超鏈接與錨
超鏈接
插入超鏈接方法使用“[]"括號(hào)內(nèi)寫我們要顯示的文字构灸,緊接著使用"()"括號(hào)內(nèi)要寫鏈接網(wǎng)址。注意"[]"和"()"小括號(hào)都是在英文輸入法下輸入的符號(hào)岸梨。
跳轉(zhuǎn)到CoreAnimation第四篇的設(shè)置如下:
[跳轉(zhuǎn)到CoreAnimation第四篇](http://www.cnblogs.com/zhouyubo/p/8410871.html)。
為超鏈接設(shè)置顏色
我是帶顏色的超鏈接稠氮。設(shè)置如下
[<font color=#1c6189>我是帶顏色的超鏈接<font>](http://www.cnblogs.com/zhouyubo/p/8410871.html)曹阔。
錨(文章內(nèi)跳轉(zhuǎn))
錨就是為了實(shí)現(xiàn)文章內(nèi)部的跳轉(zhuǎn),使用錨需要設(shè)置兩步隔披。(與超鏈接類似)
- 在跳轉(zhuǎn)的目的地添加標(biāo)簽赃份。
- 在需要被設(shè)置為點(diǎn)擊跳轉(zhuǎn)的文字處,添加上步設(shè)置的標(biāo)簽。
示例超鏈接點(diǎn)我跳轉(zhuǎn)到前言——具體設(shè)置如下:
前言標(biāo)題設(shè)置如下:(此處將文字設(shè)置標(biāo)簽與錨標(biāo)簽嵌套)
#<font face="宋體" color="#1c6189"><span id="qianyan">前言</span></font>
要設(shè)置為跳轉(zhuǎn)的文字設(shè)置如下
[點(diǎn)我跳轉(zhuǎn)到前言](#qianyan)
跳轉(zhuǎn)到指定文章的指定位置
其實(shí)是超鏈接(頁(yè)間跳轉(zhuǎn))和錨(頁(yè)內(nèi)跳轉(zhuǎn))的結(jié)合實(shí)現(xiàn)抓韩。
廢話不多說纠永,點(diǎn)我跳轉(zhuǎn)到Core Animation 文檔翻譯 (第六篇)中的小標(biāo)題“顯式動(dòng)畫幫助我們改變動(dòng)畫的參數(shù)”處。
Core Animation 文檔翻譯 (第六篇)中的小標(biāo)題“顯式動(dòng)畫幫助我們改變動(dòng)畫的參數(shù)”處是使用錨點(diǎn)設(shè)置的谒拴,只不過跳轉(zhuǎn)的跳轉(zhuǎn)的時(shí)候我們?cè)?a target="_blank" rel="nofollow">http://www.cnblogs.com/zhouyubo/p/8422931.html后面拼接了錨點(diǎn)的跳轉(zhuǎn)參數(shù)#xianshidonghuabangzhu尝江。實(shí)際設(shè)置如下:
“顯式動(dòng)畫幫助我們改變動(dòng)畫的參數(shù)”小標(biāo)題寫法如下:(此處將文字設(shè)置標(biāo)簽與錨標(biāo)簽嵌套)
#<font face="宋體" color="#1c6189"><span id="qianyan">顯式動(dòng)畫幫助我們改變動(dòng)畫的參數(shù)</span></font>
點(diǎn)我跳轉(zhuǎn)到Core Animation 文檔翻譯 (第六篇)中的小標(biāo)題“顯式動(dòng)畫幫助我們改變動(dòng)畫的參數(shù)”處設(shè)置如下:
[點(diǎn)我跳轉(zhuǎn)到Core Animation 文檔翻譯 (第六篇)中的小標(biāo)題“顯式動(dòng)畫幫助我們改變動(dòng)畫的參數(shù)”處](http://www.cnblogs.com/zhouyubo/p/8422931.html#xianshidonghuabangzhu)
代碼塊
代碼塊的設(shè)置是在切換到英文輸入法下,“ ` ”符號(hào)——即使用Esc按鍵下方的按鍵輸入的符號(hào)英上,輸入3次炭序,作為開始和結(jié)束。
while(1)
{
//代碼塊
}
上面代碼塊是這么寫的:(下面的最前面的“//”需要去掉)
//```
//while(1)
//{
// //代碼塊
//}
//```
分割線
分割線是在新的通過“-”+空格+“-”+空格+“-”設(shè)置的苍日。
上面的分割線實(shí)現(xiàn)如下
- - - //注意相鄰的“-”中間都有空格
單個(gè)區(qū)塊
這里寫區(qū)塊內(nèi)容
實(shí)現(xiàn)如下:
>這里寫區(qū)塊內(nèi)容
表格的插入和設(shè)置
表格的插入
參數(shù) | 詳細(xì)解釋 | 備注 |
---|---|---|
-l | use a long listing format | 以長(zhǎng)列表方式顯示(顯示出文件/文件夾詳細(xì)信息) |
-t | sort by modification time | 按照修改時(shí)間排序(默認(rèn)最近被修改的文件/文件夾排在最前面) |
-r | reverse order while sorting | 逆序排列 |
實(shí)現(xiàn)如下
| 參數(shù) |詳細(xì)解釋|備注|
| - | - |
| -l | use a long listing format |以長(zhǎng)列表方式顯示(顯示出文件/文件夾詳細(xì)信息) |
| -t | sort by modification time |按照修改時(shí)間排序(默認(rèn)最近被修改的文件/文件夾排在最前面) |
|-r | reverse order while sorting |逆序排列|
設(shè)置表格中某些列寬度為固定寬度
通過CSS設(shè)置寬度值惭聂,設(shè)置原理如下:
使用CSS調(diào)整某些列的寬度,設(shè)置原理中相恃,第一列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>
| 參數(shù) |詳細(xì)解釋|備注|
| - | - | - |
| -l | use a long listing format |以長(zhǎng)列表方式顯示(顯示出文件/文件夾詳細(xì)信息) |
| -t | sort by modification time |按照修改時(shí)間排序(默認(rèn)最近被修改的文件/文件夾排在最前面) |
|-r | reverse order while sorting |逆序排列|
設(shè)置表格中某些行的寬度為文章總寬度的百分比
其原理與上面設(shè)定某些列為固定值不同的是,將固定值換成占寬百分比
設(shè)置某些列占寬比原理如下:
<style>
table th:first-of-type {
width: 30%;
}
table th:nth-of-type(2) {
width: 30%;
}
</style>
| 參數(shù) |詳細(xì)解釋|備注|
| - | - | - |
| -l | use a long listing format |以長(zhǎng)列表方式顯示(顯示出文件/文件夾詳細(xì)信息) |
| -t | sort by modification time |按照修改時(shí)間排序(默認(rèn)最近被修改的文件/文件夾排在最前面) |
|-r | reverse order while sorting |逆序排列|
一片文章中多個(gè)表格揩魂,單個(gè)表格寬度控制
有時(shí)候幽邓,我們需要在單片文章內(nèi)(包含多個(gè)表格)單獨(dú)控制某個(gè)表格的各列的寬度比,示例:
參數(shù) | 詳細(xì)解釋 | 備注 |
---|---|---|
-l | use a long listing format | 以長(zhǎng)列表方式顯示(顯示出文件/文件夾詳細(xì)信息) |
-t | sort by modification time | 按照修改時(shí)間排序(默認(rèn)最近被修改的文件/文件夾排在最前面) |
原理如下:(注意:每個(gè)表都設(shè)置為“tableX”火脉,X為整數(shù)牵舵,且每個(gè)表的X在同一篇文章中的值不能相等)
<font face="宋體" size=3 class='table2'>有時(shí)候,我們需要在單片文章內(nèi)(包含多個(gè)表格)單獨(dú)控制某個(gè)表格的各列的寬度比倦挂,大致原理如下:
<style>
.table2 tr th:first-child, .table2 tr td:first-child{
width: 30%;
}
.table2 th:nth-of-type(2) {
width: 15%;
}
</style>
| 參數(shù) |詳細(xì)解釋|備注|
| - | - | - |
| -l | use a long listing format |以長(zhǎng)列表方式顯示(顯示出文件/文件夾詳細(xì)信息) |
| -t | sort by modification time |按照修改時(shí)間排序(默認(rèn)最近被修改的文件/文件夾排在最前面) |
圖片的插入和設(shè)置
插入圖片
實(shí)現(xiàn)如下:
<img src="http://images2017.cnblogs.com/blog/764024/201802/764024-20180205162555654-1350503259.jpg" />
圖片居中
在插入圖片基礎(chǔ)上加上center標(biāo)簽:
<center style="margin: 0px; padding: 0px;"></center>
實(shí)現(xiàn)如下:
<center>
<img src="http://images2017.cnblogs.com/blog/764024/201802/764024-20180205162555654-1350503259.jpg" />
</center>
指定圖片尺寸
只需要在src 后面添加上width和height對(duì)應(yīng)的值:
<center style="margin: 0px; padding: 0px;"></center>
實(shí)現(xiàn)如下:
<center>
<img src="http://images2017.cnblogs.com/blog/764024/201802/764024-20180205162555654-1350503259.jpg" width=300 height=181.5 />
</center>
目錄的生成
查了不少方法畸颅,最終本文采用了頁(yè)腳Html代碼的方式實(shí)現(xiàn)的目錄。本文提出的目錄意是是指通過一級(jí)方援、二級(jí)以及三級(jí)標(biāo)題形成的目錄没炒。
設(shè)置步驟:
- 在“管理”-“設(shè)置”-“頁(yè)腳Html代碼”,將生成目錄代碼粘貼到其中犯戏,并保存送火。
- 在“管理”-“設(shè)置”-“頁(yè)面定制CSS代碼”,將目錄中行間距調(diào)整代碼粘貼到其中先匪,并保存种吸。(此步驟只是為了美化,調(diào)整目錄中文字的行間距呀非,可只執(zhí)行第一步坚俗。)
初次設(shè)置的需要先申請(qǐng)“支持js代碼”镜盯,在“設(shè)置”下面,申請(qǐng)支持js代碼位置如下圖所示:
</center>
點(diǎn)擊后會(huì)彈出申請(qǐng)理由文本框猖败,填寫申請(qǐng)理由即可速缆,一般申請(qǐng)支持js在1-2個(gè)小時(shí)之內(nèi)就會(huì)通過。
生成目錄代碼
<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>';
// 一級(jí)目錄 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);
// 一級(jí)目錄的一條
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");
// 二級(jí)目錄 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);
// 二級(jí)目錄的一條
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");
// 三級(jí)目錄 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);
// 三級(jí)目錄的一條
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>';
// 三級(jí)目錄 end
}
if (jquery_h2_list.length > 0)
{
li_content +='</ul>';
}
li_content +='</li>';
// 二級(jí)目錄 end
content += li_content;
}
// 一級(jí)目錄 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
- 當(dāng)正確使用Markdown編輯器的標(biāo)簽時(shí)候恩闻,如果某標(biāo)簽沒有達(dá)到想要的展現(xiàn)效果艺糜,可以在編輯源文章的時(shí)候?qū)⒋藰?biāo)簽上下都通過按Enter空出一行。
- 由于Markdown在的某些細(xì)節(jié)語(yǔ)義各個(gè)平臺(tái)以及編輯APP中都有可能不同判呕,所以當(dāng)真的有實(shí)現(xiàn)不了的時(shí)候倦踢,還需自行查找。(本文是基于Mac侠草、博客園Markdown實(shí)踐而得辱挥。)