你的位置:首页 > 信息动态 > 新闻中心
信息动态
联系我们

踩坑 - markdown 文字字体、大小、 颜色、 高亮、底色样式设置及跨行表格组合

2021/10/14 13:00:26

一直在使用 Markdown 编辑器,然后发现 Markdown 在CSDN上还有一些扩展的标签,这里放出来,希望能对小伙伴们有所帮助。

文章目录

    • 利用内嵌HTML修改文字样式
    • 黄色高亮
    • 为文字添加背景色
    • 表格添加背景色
    • 跨行表格

首先需要声明的是 Markdown 本身不支持修改字体、字号与颜色等功能的。我们这里提到的样式设置是基于 CSDN - Markdown

Markdown 本身就可以借助 html 标签语言实现文字样式设置,包括字体、大小、颜色、高亮和底色。

Markdown 通过简单标记语法,使普通文本内容具有一定格式。而 CSDN-Markdown 编辑器是其衍生版本,支持基于 PageDown ( Stack Overflow)所使用的编辑器的扩展功能(如表格、脚注、内嵌HTML、内嵌 LaTeX 等等)。

附:这里并不推荐用嵌入 LaTeX 设置字体颜色,因为使用内嵌 LaTeX 进行文字颜色设置的时候,汉字都需指定一下格式。

利用内嵌HTML修改文字样式

关于Size:规定文本的尺寸大小,取值从 1 到 7 ,浏览器默认值是 3.

<font face="黑体">这是黑体字</font>
<font face="微软雅黑">这是微软雅黑</font>
<font face="STCAIYUN">这是华文彩云</font>
<font color=red size=3 face="微软雅黑">红色字体的微软雅黑</font>
<font color=blue size=4  face="STCAIYUN">蓝色字体的华文彩云</font>
<font size=5>我是尺寸</font>
<font face="黑体" color=green size=5>我是黑体,绿色,尺寸为5</font>

页面展示的效果如下:


这是黑体字
这是微软雅黑
这是华文彩云
红色字体的微软雅黑
蓝色字体的华文彩云
我是尺寸4
我是黑体,绿色,尺寸为4


黄色高亮

利用 <mark> 标签实现

语法 <mark>黄色高亮</mark>

页面展示效果如下:

我不知道怎么设置别的颜色的高亮,因为 html 的 style 属性和标签这里都不支持有知道的求告知。

为文字添加背景色

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

语法如下:

<table><tr><td bgcolor=blue>背景色蓝色</td></tr></table>

页面展示效果如下:

背景色蓝色

表格添加背景色

表格里的某个格子如何设置背景色呢?

参考下面的例子:

<table><tbody>
    <tr>
        <th>方法说明</th><th>颜色名称</th><th>颜色</th>
    </tr>
    <tr>
        <td><font color="Hotpink">此处实现方法利用 CSDN-markdown 内嵌 html 语言的优势</font></td><td><font color="Hotpink">Hotpink</font></td><td bgcolor="Hotpink">rgb(240, 248, 255)</td>
    </tr>
    <tr>
        <td><font color="Pink">借助 table, tr, td 等表格标签的 bgcolor 属性实现背景色设置</font></td><td><font color="pink">AntiqueWhite</font></td><td bgcolor="Pink">rgb(255, 192, 203)</td>
    </tr>
</table>

页面展示效果如下:

方法说明颜色名称颜色
此处实现方法利用 CSDN-markdown 内嵌 html 语言的优势Hotpinkrgb(240, 248, 255)
借助 table, tr, td 等表格标签的 bgcolor 属性实现背景色设置AntiqueWhitergb(255, 192, 203)

跨行表格

示例如下:

<table><tbody>
    <tr>
        <th rowspan="3">我占了三行</th>
        <th>第一列</th>
        <th>第二列</th>
        <th>第三列</th>
    </tr>
    <tr>
        <td>第一列</td>
        <td>第二列</td>
        <td>第三列</td>
    </tr>
    <tr>
        <td>第一列</td>
        <td>第二列</td>
        <td>第三列</td>
    </tr>
</table>  

页面展示效果如下:

我占了三行第一列第二列第三列
第一列第二列第三列
第一列第二列第三列