前言
本文会将为每个设置的样式在文章中给出示例
本文不介绍完整的 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 键空格, 来做显示上的对齐 (其原理还是第一级的使用方法, 只不过前面加了空格作为对齐, 制造出显示效果)
多级列表示例:
此处写文字
此处写文字 // 代表第二阶
此处写文字
此处写文字 // 代表三阶
此处写文字
此处写文字
此处写文字
实现如下:
多级列表
- 此处写文字
- 此处写文字 // 代表第二阶
- 此处写文字
- 此处写文字 // 代表三阶
- 此处写文字
- 此处写文字
- 此处写文字
不要忘记 - 和内容之间有个空格
超链接与锚
超链接
插入超链接方法使用 []"括号内写我们要显示的文字, 紧接着使用"()"括号内要写链接网址注意"[]"和"()" 小括号都是在英文输入法下输入的符号
跳转到 CoreAnimation 第四篇的设置如下:
[跳转到 CoreAnimation 第四篇](http://www.cnblogs.com/zhouyubo/p/8410871.html)
锚 (文章内跳转)
锚就是为了实现文章内部的跳转, 使用锚需要设置两步 (与超链接类似)
在跳转的目的地添加标签
在需要被设置为点击跳转的文字处, 添加上步设置的标签
示例超链接点我跳转到前言具体设置如下:
前言标题设置如下:(此处将文字设置标签与锚标签嵌套)
#<font face="宋体" color="#1c6189"><span id="qianyan"> 前言 </span></font>
要设置为跳转的文字设置如下
[点我跳转到前言](#qianyan)
代码块
代码块的设置是在切换到英文输入法下, ` 符号即使用 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 设置宽度值或者宽度比例
参数 | 详细解释 | 备注 |
---|---|---|
-l | use a long listing format | 以长列表方式显示(显示出文件 / 文件夹详细信息) |
-t | sort by modification time | 按照修改时间排序(默认最近被修改的文件 / 文件夹排在最前面) |
-r | reverse order while sorting | 逆序排列 |
上面表格设置原理如下:
使用 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 | 逆序排列 |
设置表格中某些行的宽度为文章总宽度的百分比
其原理与上面设定某些列为固定值不同的是, 将固定值换成占宽百分比
参数 | 详细解释 | 备注 |
---|---|---|
-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 | 逆序排列 |
图片的插入和设置
插入图片
实现如下:
<img src="http://images2017.cnblogs.com/blog/764024/201802/764024-20180205162555654-1350503259.jpg" />
图片居中
- <center>
- <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" width=300 height=181.5 />
- </center>
- <script language="javascript" type="text/javascript">
- // 生成目录索引列表
- function GenerateContentList()
- {
- var mainContent = $('#cnblogs_post_body');
- var h2_list = $('#cnblogs_post_body h1');// 如果你的章节标题不是 h2, 只需要将这里的 h2 换掉即可
- if(mainContent.length < 1)
- return;
- if(h2_list.length>0)
- {
- var content = '<a name="_labelTop"></a>';
- content += '<div id="navCategory"style="color:#1c6189;">';
- content += '<p style="color:#1c6189; font-size:18px;"><b > 目录 </b></p>';
- content += '<style type="text/css">';
- content += 'ul,li{list-style-type:none; margin:0; padding:0}';
- content +='</style>';
- content += '<ul type="circle"style="margin-top:0px"padding-top:"6px";>';
- for(var i=0; i<h2_list.length; i++)
- {
- var go_to_top = '<div style="text-align: right;"><a href="#_labelTop"style="color:#1c6189; text-decoration:none;"> 回到顶部 </a><a name="_label'+ i +'"></a></div>';
- $(h2_list[i]).before(go_to_top);
- var h3_list = $(h2_list[i]).nextAll("h2");
- var li3_content = '';
- for(var j=0; j<h3_list.length; j++)
- {
- var tmp = $(h3_list[j]).prevAll('h1').first();
- if(!tmp.is(h2_list[i]))
- break;
- var li3_anchor = '<a name="_label'+ i +'_'+ j +'"></a>';
- $(h3_list[j]).before(li3_anchor);
- li3_content += '<li style="line-height:20px"><a href="#_label'+ i +'_'+ j +'" style="color:#1c6189; text-decoration:none;">'+ $(h3_list[j]).text() +'</a></li>';
- }
- var li2_content = '';
- if(li3_content.length > 0)
- li2_content = '<li style="line-height:20px"><a href="#_label'+ i +'" style="color:#1c6189; text-decoration:none;">'+ $(h2_list[i]).text() +'</a><ul>'+ li3_content +'</ul></li>';
- else
- li2_content = '<li style="line-height:20px"><a href="#_label'+ i +'" style="color:#1c6189; text-decoration:none;">'+ $(h2_list[i]).text() +'</a></li>';
- content += li2_content;
- }
- 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>
- .postBody li, .postCon li{
- margin-top:1em;
- }
来源: https://www.cnblogs.com/zhouyubo/p/8412840.html