MarkDown常用使用技巧---字体颜色、大小、背景色、表格、图片大小修改---CSDN篇

最新推荐文章于 2025-04-08 12:28:09 发布

hello-alien

最新推荐文章于 2025-04-08 12:28:09 发布

阅读量4.1k

点赞数 5

分类专栏：炫酷小工具文章标签： html markdown 字体颜色图片大小表格

本文链接：https://blog.csdn.net/chenmozhe22/article/details/125243404

版权

炫酷小工具专栏收录该内容

5 篇文章

订阅专栏

文章目录

【背景故事】
MarkDown不同的平台，使用稍微有点差别。本博文主要介绍在CSDN中博文编辑时候的使用技巧。介绍的方法是否使用任何其他markdown平台不得而知。

1.颜色中的各种色号问题

推荐网站: 百图汇

2.段落中的字体大小、颜色、字体类型

size: 规定文本的尺寸大小的值：从 1 到 7 ,浏览器默认值是 3,超过7就按照7的size显示。

【效果如下】

我是黑体字
我是微软雅黑
我是华文彩云

颜色#00ffff &大小

颜色Pink与大小

【原始代码】


<font color=#0099ff size=5 face="黑体">我是黑体字</font>
<font color=#0099ff size=5 face="KaiTi">我是微软雅黑</font>
<font color=#0099ff size=5 face="Microsoft JhengHei">我是华文彩云</font>


<div><font color=#00ffff size=7>颜色#00ffff &大小</font></div>
<font color=green size=7>颜色green与大小</font>

3.文字背景色、整行背景色

【效果如下】

$\colorbox{green}{Hello World ! }$

背景色为#00FFFF，居中、未加粗

背景色为#00FF30，居中、加粗

背景色为#0080FF，左对齐、未加粗

背景色为#E0E0E0，右对齐、未加粗

【原始代码】


<table><tr><td bgcolor=#00FFFF >背景色为#00FFFF，居中、未加粗</td></tr></table>

<table><tr><td bgcolor=#00FF30 ><b>背景色为#00FF30，居中、加粗</td></tr></table>

<table><tr><td bgcolor=#0080FF align="left" >背景色为#0080FF，左对齐、未加粗</td></tr></table>

<table><tr><td bgcolor=#E0E0E0 align="right" >背景色为#E0E0E0，右对齐、未加粗</td></tr></table>

4.备注信息中的颜色

【效果1，如下】

【备注信息】

这是一段很重要的信息， 1.后面有一个空格
很长很长的内容如下
…

【原始代码】


> <font  color="006030" size=3 > <b>【备注信息】
> 1. 这是一段很重要的信息
> 2. 很长很长的内容如下
> 3. ..

【效果2，如下】

【备注信息】
1.这是一段很重要的信息
2.很长很长的内容如下
3…

【原始代码】


> <font  color="006030" size=3 > <b>【备注信息】
> 1.这是一段很重要的信息
> 2.很长很长的内容如下
> 3..

5.markdown表格

（1）快速创建表格

工具：TableConvert

step1: 复制excel或text中的内容

在这里插入图片描述

step2: 复制excel或text中的内容到Data Source中

在这里插入图片描述

step3: Table Generator中将会自动转换为markdown格式

在这里插入图片描述

【效果如下】

表头-1	表头-2
单元格-1	单元格-11
单元格-2	单元格-12
单元格-3	单元格-13
单元格-4	单元格-14
单元格-5	单元格-15
单元格-6	单元格-16
单元格-7	单元格-17

（2）表格对齐方式

【左对齐效果】

表头-1	表头-2
单元格-1	单元格-11
单元格-2	单元格-12

【原始代码】


| **表头-1** | **表头-2** |
|:----------|----------|
| 单元格-1    | 单元格-11   |
| 单元格-2    | 单元格-12   |

【右对齐效果】

表头-1	表头-2
单元格-1	单元格-11
单元格-2	单元格-12

【原始代码】


| **表头-1** | **表头-2** |
| --------- | ----------:|
| 单元格-1    | 单元格-11   |
| 单元格-2    | 单元格-12   |

6.修改插入的图片显示的大小

一般来说，多张照片的整体如果可以保持一致，最终看到的效果就好很多。

将一个图片插入到博客中，一般的格式大致如下：



![在这里插入图片描述](https://img-blog.csdnimg.cn/36415095de5xxxxx.png)

先将图片插入到博客中，然后再改(这样csdn图片官网会缓存你图片的网络地址)为img标签的样式即可：



<img src="https://img-blog.csdnimg.cn/c02xxx.png" width="800px" />