CSDN中Markdown如何自定义字体样式

Markdown如何自定义字体样式：字体颜色、背景、斜体、粗体、下划线、删除线、高亮、下/上标

————————————————————————————————————————————————————————————
快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G
撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成
直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。
直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

前言

最近写文章时，发现需要使用一些不同的Markdown语法来显示，在此整理和记录下这些语法，同时分享给大家。

一、字体大小

size：规定文本的尺寸大小，取值范围为1~7 ，浏览器默认值是 3。

Markdown语法：

<font size=1>字体大小size=1</font>
<font size=3>字体大小size=3</font>
<font size=5>字体大小size=5</font>
<font size=7>字体大小size=7</font>

效果如下：

字体大小size=1
字体大小size=3
字体大小size=5
字体大小size=7

二、字体颜色

1. 英文字母

Markdown语法

<font color=red>红色</font>
<font color="green">绿色</font>
<font color="blue">蓝色</font>
<font color="BlueGreen">蓝绿色</font>
<font color=Yellow>黄色</font>
<font color=YellowGreen>黄绿色</font>

效果如下：
红色
绿色
蓝色
蓝绿色
黄色
黄绿色

2. 十六进制颜色值

Markdown语法

<font color=#000000>黑色</font>
<font color=#ff0000>红色</font>
<font color=#00ff00>绿色</font>
<font color=#0000ff>蓝色</font>

效果如下：
黑色
红色
绿色
蓝色
附：常用的颜色

颜色名	十六进制颜色值	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)

三、字体背景色

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

Markdown语法

<table><tr><td bgcolor=orange>背景色orange</td></tr></table>

效果如下：

背景色orange

四、字体类型

注意，字体类型的设置只能在电脑上才能显示字体效果，在手机上无法显示字体类型
Markdown语法

<font face="黑体">黑体</font>
<font face="宋体">宋体</font>
<font face="仿宋">仿宋</font>
<font face="幼圆">幼圆</font>
<font face="楷书">楷书</font>
<font face="华文行楷">华文行楷</font>
<font face="华文隶书">华文隶书</font>
<font face="华文新魏">华文新魏</font>
<font face="华文彩云">华文彩云</font>
<font face="华文琥珀">华文琥珀</font>

效果如下：
黑体
宋体
仿宋
幼圆
楷书
华文行楷
华文隶书
华文新魏
华文彩云
华文琥珀

五、字体加粗

用**包含一段文本就是粗体的语法。

Markdown语法

**加粗**

效果如下：
加粗
也可以使用编辑器里的快捷键，如下快捷键即可快速粗体：

粗体：Ctrl+B

六、字体斜体

用*包含一段文本就是斜体的语法。

Markdown语法

*斜体*

效果如下：

斜体

也可以使用编辑器里的快捷键，如下快捷键即可快速斜体：

斜体：Ctrl+I

七、下划线

用标签包含一段文本就是下划线的语法。

Markdown语法

<u>文本</u>

效果如下：
文本

注意：

• Markdown自身没有实现下划线，但它是HTML的子集，实现了标签；
• CSDN的锚和链接是没有下划线的、只是颜色高亮，一般建议加上下划线，会更明确是链接、可点击的；
• 一般文本建议不要加下划线，容易误会成链接；

八、删除线

用~~包含一段文本就是删除线的语法。

Markdown语法

~~文本~~

效果如下：
文本

九、高亮

高亮的定义：通过字体的颜色或背景色，突出某内容。

有以下几种情况：

代码高亮

这是最普遍支持的高亮。又分为行内代码和代码块两种：

行内代码高亮

语法如下：

`print $0` 

效果如下：
print $0

行内代码中，若需要``符号，可使用`` ` ``实现

注意：

• 两侧需有空格或制表符

• 以此类推，若要实现`` ，可通过 ``` `` ```实现

代码块高亮

语法如下：

## 注意：下面是py增强代码块的特性，指代码块是python语法，不同的markdown编辑器对此支持可能会有不同
```py
print $0

效果如下：

print $0

代码块中，也支持出现 。与行内代码类似，代码中连续的 ，不能超过代码块最外侧的 ` 数量。例如，要打印 ```（3个），代码块需使用 ````（4个）声明

普通文本高亮

CommonMark中并未定义普通文本高亮。

可通过HTML标签<mark>实现：

语法如下：

<mark>文本高亮</mark>

效果如下：
文本高亮

注意： 不同编辑器对<mark>标签的样式实现可能会略有不同

CSDN中支持通过==文本高亮==，实现文本高亮
Markdown语法

==文本高亮==

效果如下：
文本高亮

十、下标

用~包含一段文本就是下标的语法。
Markdown语法

文本~下标~

效果如下：
文本_下标

十一、上标

用^包含一段文本就是上标的语法。
Markdown语法

文本^上标^

效果如下：
文本^上标

十二、混合使用

实现一个颜色为红色、字号为5、字体为华文琥珀的文字样式。
Markdown语法

<b><font size=5 color=red face="华文琥珀">华文琥珀</font></b>

效果如下：
华文琥珀

十三、自定义图片大小

如果需要自定义图片大小，可以使用HTML标签来实现。
例如，要插入一个宽度为600px，高度为250px的图片，可以这样写：

十四、插入GIF动图

1. 在原图片上右键，选择【复制图片地址】
   
2. 在markdown编辑页面，点击插入图片
   
3. 选择图片添加方式：链接添加
   
4. 粘贴地址，然后保存
   
5. 点击确定，即可添加成功
   

十五、分割线

在 Markdown 文件中，连续的三个「星号 *」，或者连续的三个「减号 -」，或者连续的三个「下划线 _」会被渲染成分割线。

### 下面是三类分割线


使用「星号」作为分割线

***

使用「减号」作为分割线

---

使用「下划线」作为分割线
___

渲染效果如下：

十六、实现“内容折叠”功能

十七、添加题注

<center>
    <img src="https://i-blog.csdnimg.cn/blog_migrate/593ea5aeb7fbdb6658298291ad98c855.png">
    <div><font size=3>“这里是题注</font>”</div>
</center>

效果如下：

“这里是题注”

总结

以上就是文章的全部内容，本文仅仅简单介绍了 Markdown 如何自定义字体样式，而Markdown还有其他丰富的语法，待后续总结后记录和分享。