这里并不是要总结所有的 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

markdown 常用语法总结 - 个人版的更多相关文章

  1. MarkDown常用语法表

    MarkDown常用语法表 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 Title - 标题 2 H ...

  2. Markdown常用语法学习

    Markdown常用语法学习,这些就够用了. 演示地址: https://github.com/YalongYan/Markdown-- 特别提示:  标题'##'后面必须加一个空格,否则编译不对.# ...

  3. 老贾的幸福生活day3 之markdown常用语法简要

    1.markdown常用语法 标题 一级到六级 用#+空格实现 2.代码块 3个 `实现 python is a ...... 单行代码,用"``" 3.列表 有序列表 跟内容 数 ...

  4. 《Markdown常用语法及快捷键》

    Markdown常用语法及快捷键       [```]+空格--代码格式 [---]+空格--水平分割线 [&emsp]+[;]--空格 [shift]+[tab]--清除当前行的格式

  5. Markdown常用语法

    什么是Markdown Markdown 是一种方便记忆.书写的纯文本标记语言,用户可以使用这些标记符号以最小的输入代价生成极富表现力的文档. 通过Markdown简单的语法,就可以使普通文本内容具有 ...

  6. Markdown 常用语法总结

    注意:Markdown使用#.+.*等符号来标记,符号后面必须跟上至少跟上 1个空格才有效! Markdown的常用语法 标题 Markdown标题支持两种形式. 1.用#标记 在标题开头加上1~6个 ...

  7. markdown常用语法总结

    转自markdown示例[模板] 1.1.段落标题 根据原文中的文档标题可以对应设置标题. # 一级标题## 二级标题### 三级标题 效果 => 一级标题 二级标题 三级标题 1.2.斜体.加 ...

  8. Markdown常用语法对应

    这是一遍备忘录,当忘记Markdown的语法的时候,就到这里来参照. 第一部分是markdown的语法,紧接着就是该语法的效果. 代码语法高亮 ```javascript function synta ...

  9. MarkDown 常用语法教程

    MarkDown 语法说明 [TOC] 标题 标题1 ====== 标题2 ----- ## 大标题 ### 小标题 #### 小标题 列表 无序列表 + 列表文本前使用 [减号+空格] * 列表文本 ...

随机推荐

  1. 洛谷P1257 平面上的最接近点对

    n<=10000个点,求欧几里德距离最小的一对点. 经典分治,把这些点按x排序,分成两半,每边分别算答案,答案是左边的最小,右边的最小,左右组起来的最小三者的最小.发现只有左右组的有点难写. 假 ...

  2. Linux下汇编语言学习笔记6 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  3. 获取webview的截图

    设置webview可以获取截图: webView.setDrawingCacheEnabled(true); 当要进行多次截图时,先要清除之前的缓存: webview.setDrawingCacheE ...

  4. SOJ 2785_Binary Partitions

    [题意]将一个数用二进制数表示,求一共有多少种表示方法. [分析]思路一:完全背包 [代码] #include <iostream> #include <cstdio> #in ...

  5. Delphi简单的数据操作类

    unit MyClass; uses   Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs,   VCL ...

  6. Path Sum(参考别人,二叉树DFS)

    Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...

  7. Linux 攻击防护基础排查

    作者:Zzang 来源:cnblogs 原文:https://www.cnblogs.com/Zzang/p/LinuxHack.html 版权声明:本文为博主原创文章,转载请附上博文链接! 基本网络 ...

  8. Ubuntu 16.04利用SecureCRT上传/下载文件(sz/rz命令)

    说明:XShell同样也是支持的. 一.安装软件 sudo apt-get install lrzsz 二.sz下载文件用法: #下载一个文件 sz filename #下载多个文件 sz filen ...

  9. Ubuntu 16.04安装RapidSVN

    使用RabbitVCS有一些不完美,比如没有把文件增加到版本库的功能,导致无法提交等问题,现在再次安装RapidSVN来弥补这些缺点. 安装: sudo apt-get install rapidsv ...

  10. no matching function transform?

    http://stackoverflow.com/questions/19876746/stdtolower-and-visual-studio-2013 http://forums.codeguru ...