markdown 常用语法总结 - 个人版

目录

• 1 图片设置
  • 1.1 设置图片大小
  • 1.2 添加图片题注
• 2 文字设置
  • 2.1 设置文字居中
  • 2.2 设置文字颜色
  • 2.3 设置文字大小
  • 2.4 设置文字字体
  • 2.5 设置文字背景色
• 3 换行、缩进
  • 3.1 换行
  • 3.2 缩进
• 4 折叠语法

 

---

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

回到顶部

1 图片设置

1.1 设置图片大小

在图片的最后添加 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.2 添加图片题注

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

回到顶部

2 文字设置

2.1 设置文字居中

示例如下：

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

效果如下：

你的名字

2.2 设置文字颜色

示例如下：

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

效果如下：

       蓝色文字

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

2.3 设置文字大小

示例如下：

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

效果如下：

size为15px
size为25px
size为35px

2.4 设置文字字体

示例如下：

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

（2）效果如下：

我是黑体字
我是宋体字
我是微软雅黑字
我是fantasy字

2.5 设置文字背景色

示例如下：

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

效果如下：

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

（3）解读如下：

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

回到顶部

3 换行、缩进

3.1 换行

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

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

3.2 缩进

首行缩进两个字符：(每个表示一个空格，连续使用两个即可）

  半角的空格
  全角的空格

回到顶部

4 折叠语法

主要使用的是 html5的 details标签。

示例如下：

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

效果如下：

折叠文本

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

折叠代码块

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

折叠代码块

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

解读如下：

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

参考

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