这里并不是要总结所有的 markdown 语法,只是总结笔者自己撰写博客时常用的一些 markdown 语法。

1 图片设置

1.1 设置图片位置

利用markdown在编写文档时插入图片是默认靠左,有些时候将图片设置为居中时可以更加的美观,这时就需要在图片的信息前边添加如下程序(注意: <div align=xx> 前要有至少一个空格,否则图片不会显示出来):

 <div align=center>![这里写图片描述](http:...)</div>
![](https://img2018.cnblogs.com/blog/1075214/201812/1075214-20181214153131030-1792088028.png)

如果想将图片位于右侧,只需要将center改为right :

 <div align=right>![这里写图片描述](http:...)</div>
![](https://img2018.cnblogs.com/blog/1075214/201812/1075214-20181214153131030-1792088028.png)

1.2 设置图片大小

在图片的最后添加 width = “100” height = “100”,就可以设置图片的大小。也可以在后边输入百分比为多少,如 width = 20% height = 20%

 <img src="http:..."   width = "100" height = "100" /></div>

也可以在后边输入百分比为多少,如 width = 50% height = 50%

<img src="http:..." width = 50% height = 50% /></div>

1.3 添加图片题注

如果想对图片添加题注,那么代码更改如下:

 <div align=center>![这里写图片描述](http:...)
题注内容 </div>
![](https://img2018.cnblogs.com/blog/1075214/201812/1075214-20181214153131030-1792088028.png)
1-1 图片题注

2 文字设置

2.1 设置文字居中

(1)示例如下:

<p align="center">你的名字</p>

(2)效果如下:

你的名字

2.2 设置文字颜色

(1)示例如下:

<span style="color:#0000FF">蓝色文字</span>

(2)效果如下:

      蓝色文字

颜色代码采用的是RGB格式, 这里有个对照 ,可以选择你想要的颜色对应的RGB值。

size为1

2.3 设置文字大小

(1)示例如下:

<span style="font-size:15px;">size为15px</span>
<span style="font-size:25px;">size为25px</span>
<span style="font-size:35px;">size为35px</span>

(2)效果如下:

size为15px

size为25px

size为35px

2.4 设置文字字体

(1)示例如下:

<font face="黑体">我是黑体字</font>
<font face="宋体">我是宋体字</font>
<font face="微软雅黑">我是微软雅黑字</font>
<font face="fantasy">我是fantasy字</font>

(2)效果如下:

我是黑体字

我是宋体字

我是微软雅黑字

我是fantasy字

2.5 设置文字背景色

(1)示例如下:

<table><td bgcolor=#c2c2c2>
背景色的设置是按照十六进制颜色值:#FF83FA<br />
这是第二行
</td></table>

(2)效果如下:

背景色的设置是按照十六进制颜色值:#FF83FA
这是第二行

(3)解读如下:

  • <td>标签的bgcolor属性用于设置单元格的背景颜色。
  • 虽然<td>标签的bgcolor属性已被弃用,但所有主流浏览器仍然支持它。

3 换行、缩进

3.1 换行

方法1: 连续两个以上空格+回车

方法2:使用HTML语言换行标签:

3.2 缩进

首行缩进两个字符:(每个表示一个空格,连续使用两个即可)

&ensp; 半角的空格

&emsp; 全角的空格

4 折叠语法

主要使用的是 html5details标签。

(1)示例如下:

<details>
<summary>折叠文本</summary>
此处可书写文本
嗯,是可以书写文本的
</details> <details>
<summary>折叠代码块</summary>
<pre><code>
System.out.println("虽然可以折叠代码块");
System.out.println("但是代码无法高亮");
</code></pre>
</details> <details>
<summary>折叠代码块</summary>
<pre><blockcode>
System.out.println("虽然可以折叠代码块");
System.out.println("但是代码无法高亮");
</blockcode></pre>
</details>

(2)效果如下:

折叠文本

此处可书写文本
嗯,是可以书写文本的

折叠代码块

System.out.println("虽然可以折叠代码块");
System.out.println("但是代码无法高亮");
折叠代码块
     System.out.println("虽然可以折叠代码块");
System.out.println("但是代码无法高亮");

(3)解读如下:

  • details:折叠语法标签
  • summary:折叠语法展示的摘要
  • pre:以原有格式显示元素内的文字是已经格式化的文本
  • code:指定代码块
  • blockcode:指定代码块

参考**

  1. 【MarkDown】使用Html样式和折叠语法
  2. 让你的md文档可折叠化展示 #155

最新文章

  1. Linux标准出错重定向导出
  2. weave 建立跨节点docker网络
  3. 向架构师进军---&gt;系统架构设计基础知识
  4. 如何用openvr api打开vive前置摄像头
  5. ZooKeeper(3.4.5) 使用Curator监听事件
  6. CSS各个浏览器Hack的写法
  7. BZOJ 3140 消毒(最小顶点覆盖)
  8. [条形码] BarCodeToHTML条码生成类 (转载)
  9. JSP与Servlet之间传值
  10. jQuery 方法
  11. Linux 查看 硬件配置
  12. SpringMVC通过实体类返回json格式的字符串,并在前端显示
  13. UNIX环境高级编程——System V 共享内存区
  14. 1.PHP与Web页面的交互
  15. PHP 调第三方跨域接口示例
  16. [LeetCode] 69. Sqrt(x)_Easy tag: Binary Search
  17. ASP.net在网页上显示当前时间,利用AJAX不刷新网页
  18. MatConvNet+Matlab2017a+CUDA8.0安装
  19. Android权限操作之uses-permission详解
  20. php异常处理类

热门文章

  1. eclipse安装Aptana 插件,并设置使之能提示css,js,html,帮助编写代码
  2. 【51NOD1766】树上的最远点对(线段树,LCA,RMQ)
  3. poj——3687 Labeling Balls
  4. 何为幻读?MySQL又是如何解决幻读的?
  5. Codeforces 479B. Towers 暴力
  6. 异 形 卵 709 南阳oj
  7. 微信JSSDK使用指南
  8. Zabbix 监控服务器
  9. Jenkins安装与使用
  10. Jenkins performance插件生成性能测试报告【待完成】