Markdown更改字体、颜色、大小，设置文字背景色，调整图片大小设置居中，插入表格等方法

Markdown 通过简单标记语法，使普通文本内容具有一定格式。但它本身不支持修改字体、字号与颜色等功能的。

一、更改字体大小、颜色、更改字体

Markdown语法

<font >我是逐浪新宋</font>
<font >我是逐浪圆体</font>
<font >我是逐浪花体</font>
<font >我是逐浪像素字</font>
<font >我是逐浪立楷</font>
<font color=red>我是红色</font>
<font color=#008000>我是绿色</font>
<font color=yellow>我是黄色</font>
<font color=Blue>我是蓝色</font>
<font color= #871F78>我是紫色</font>
<font color= #DCDCDC>我是浅灰色</font>
<font size=5>我是尺寸</font>
<font size=10>我是尺寸</font>
<font  color=green size=10>我是逐浪立楷，绿色，尺寸为5</font>
           

效果如下：

我是逐浪新宋

我是逐浪圆体

我是逐浪花体

我是逐浪像素字

我是逐浪立楷

我是红色

我是绿色

我是黄色

我是蓝色

我是紫色

我是浅灰色

我是尺寸

我是尺寸

我是逐浪立楷，绿色，尺寸为5

二、为文字添加背景颜色

由于 style 标签和标签的 style 属性不被支持，所以这里只能是借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色。这里对于文字背景色的设置，只是将那一整行看作一个表格，更改了那个格子的背景色（bgcolor）

Markdown语法

<table><tr><td bgcolor=green>背景色yellow</td></tr></table>
           

效果如下：

背景色yellow

三、Markdown创建表格

1、极简模式

水果名称| 价格 |  数量  
-|-|-
香蕉 | $1 | 5 |
苹果 | $1 | 6 |
草莓 | $1 | 7 |

           

效果如下：

水果名称	价格	数量
香蕉	$1	5
苹果	$1	6
草莓	$1	7

2、简单方法

name | 111 | 222 | 333 | 444
- | :-: | :-: | :-: | -:
aaa | bbb | ccc | ddd | eee| 
fff | ggg| hhh | iii | 000|

           

效果如下：

name	111	222	333	444
aaa	bbb	ccc	ddd	eee
fff	ggg	hhh	iii	000

3、原生方法

name | 111 | 222 | 333 | 444
:-: | :-: | :-: | :-: | :-:
aaa | bbb | ccc | ddd | eee| 
fff | ggg| hhh | iii | 000|

           

效果如下：

name	111	222	333	444
aaa	bbb	ccc	ddd	eee
fff	ggg	hhh	iii	000

常用的颜色

颜色名	十六进制颜色值	rgb颜色
黑色（black)	000000	rgb(0, 0, 0)
蓝色（blue）	0000FF	rgb(0, 0, 255)
灰色（grey）	808080	rgb(128, 128, 128)
绿色（green）	008000	rgb(0, 128, 0)
橙色（orange）	FFA500	rgb(255, 165, 0)
红色(red)	FF0000	rgb(255, 0, 0)
黄色（yellow）	FFFF00	rgb(255, 255, 0)

三种方法的区别

简单方法虽然是稍微简单了些，但是前后因为没有格式所以第一列和最后一列没有居中，对于极简方式来说还相当繁琐。极简方式简单，但是都是左对齐。原生方式格式更美观。个人意见强迫症患者请用原生方式，其他请随意。

表格语法说明

1）|、-、:之间的多余空格会被忽略，不影响布局。

2）默认标题栏居中对齐，内容居左对齐。

3）-:表示内容和标题栏居右对齐，:-表示内容和标题栏居左对齐，:-:表示内容和标题栏居中对齐。

4）内容和|之间的多余空格会被忽略，每行第一个|和最后一个|可以省略，-的数量至少有一个。

四、设置图片大小

1、设置设置图片百分比

Markdown语法

<img src="https://www.z01.com/Template/office/style/images/home_product_phone09.png" width="50%" height="50%">

           

效果如下：

2、设置图片大小

Markdown语法

<img src="https://www.z01.com/Template/office/style/images/home_product_phone09.png" width="251" height="350" >

           

效果如下

3、设置图片居中

Markdown语法

<div align=center><img src="https://www.z01.com/Template/office/style/images/home_product_phone09.png" width="50%" height="50%"></div>

           

效果如下

PS:位置显示三个属性：center,left，right