markdown改變字體、顏色和大小


要想改變字體和顏色,可以使用font標簽

改變顏色用color屬性(支持RGB和十六進制)

改變大小用size屬性

改變字體用face屬性(字體需要加雙引號)

還可以混合使用,屬性之間用空格間隔

 

Markdown 通過簡單標記語法,使普通文本內容具有一定格式。但它本身不支持修改字體、字號與顏色等功能的。

一、更改字體大小、顏色、更改字體

Markdown語法

<font face="逐浪新宋">我是逐浪新宋</font><font face="逐浪圓體">我是逐浪圓體</font><font face="逐浪花體">我是逐浪花體</font><font face="逐浪像素字">我是逐浪像素字</font><font face="逐浪立楷">我是逐浪立楷</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 face="逐浪立楷" color=green size=10>我是逐浪立楷,綠色,尺寸為5</font>

效果如下:

 


二、更改字體大小、顏色、更改字體

由於 style 標簽和標簽的 style 屬性不被支持,所以這里只能是借助 table, tr, td 等表格標簽的 bgcolor 屬性來實現背景色。這里對於文字背景色的設置,只是將那一整行看作一個表格,更改了那個格子的背景色(bgcolor)

Markdown語法

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

效果如下:


三、Markdown創建表格
1、極簡模式

水果名稱| 價格 |  數量   -|-|- 香蕉 | $1 | 5 | 蘋果 | $1 | 6 | 草莓 | $1 | 7 |

效果如下:


2、簡單方法

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|

效果如下:


常用的顏色
顏色名 | 十六進制顏色值 |  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 作者:字庫大師程序員發哥 https://www.bilibili.com/read/cv5975926/ 出處:bilibili

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM