Markdown自定义字体样式（字体颜色、背景）

原创 已于 2024-07-29 19:26:34 修改 · 1.9k 阅读 · 20 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #编辑器

于 2024-07-29 16:52:09 首次发布

文章目录

前言

⚠️ 提示：这里只记录自己常用的语法，并不全面，如需要完整语法请至官网查看：

写笔记是一直以来的计划，记录的过程不仅可以复习巩固，还可以查漏补缺。最近在写笔记时，接触了Markdown，在此记录下写作过程中常用的Markdown语法，分享给感兴趣的小伙伴。
Markdown 在线编辑器：https://markdown.com.cn/editor/

一、字体大小

Markdown语法：

<font size=1>我是 size=1 的字体</font>
<font size=2>我是 size=2 的字体</font>
<font size=3>我是 size=3 的字体</font>
<font size=4>我是 size=4 的字体</font>
<font size=5>我是 size=5 的字体</font>
<font size=6>我是 size=6 的字体</font>
<font size=7>我是 size=7 的字体</font>

size属性：规定文本的尺寸大小，取值范围为 1 到 7 ，浏览器默认值是 3。
🔔🔔 注意：size值大于7也是可以显示的，但与7的字体大小一样

显示效果如下：

我是 size=1 的字体
我是 size=2 的字体
我是 size=3 的字体
我是 size=4 的字体
我是 size=5 的字体
我是 size=6 的字体
我是 size=7 的字体

二、字体颜色

Markdown语法：


                

                
                
        

    

    
  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
markdown加载自定义字体

				
			

			

				

					微电子学与固体电子学-俞驰
				

				

					02-08
					
					550
					
				

			

		

		

			
				
在VSCODE上渲染成功的结果，在gitee的md文件在线显示时，是不支持渲染的，会打回原形。使用vscode想要渲染的话，似乎只能渲染一部分字体文件。最后、但是，不要觉得VS code上的渲染结果就是其他的地方的渲染结果，如果使用joplin、gitee的md文件是无法加载、渲染的。一、需要特定的markdown编辑器，我用的vscode。需要在当前目录下有fonts文件夹，并且有字体文件。如果发现有字体无法渲染，很可能是 字体文件的问题。写讲义，如果没有个像样 的字体多少有点难受。

			
		

	



                

            
              



	

		

			

				
					
【Android -- 写作工具】Markdown 字体字号

				
			

			

				

					Kevin Learn Android
				

				

					05-23
					
					2061
					
				

			

		

		

			
				
字体是丰富排版效果的主要方式。一篇文章中会通过不同的字体字号来区分文字的作用，例如使用「黑体」，「一号字」作为标题，使用「宋体」、「四号字」作为正文等。

			
		

	



              


  
              

                


	

		

			

				
					
【Markdown语法】字体颜色大小及文字底色设置

				
			

			

				

					xdy762024688的博客
				

				

					08-23
					
					3万+
					
				

			

		

		

			
				
算是我本人写博客时比较偏爱的一种方式啦，尤其是在一堆文字里写上一句代码时，或者特地突出哪句话时，加上粉色矩形框就比较nice了，既能起到突出强调的作用，方便阅读，并且也比较美观（相比较黄色的高亮好太多了~）！自 CSDN-markdown编辑器语法——字体、字号与颜色 的颜色列表，按颜色名排序。如果不需要改变输入内容的其他属性，比如加粗，斜体等，可以在内容前面加上。Ω snow , 单片机学习（3）——数码管的显示+定时器+中断 ↩。文章作者1（任意想输入的汉字）, 转载文章的名称. ↩。

			
		

	





	

		

			

				
					
如何在Markdown中设置字体颜色？

					
最新发布

				
			

			

				

					
				

				

					08-23
					
					621
					
				

			

		

		

			
				
Markdown原生不支持字体颜色设置，但可通过HTML标签或CSS实现。常见方法包括使用<font color>标签（已弃用）或更推荐的<span style>内联CSS。不同解析器（如GitHub Flavored Markdown、Pandoc）对HTML支持程度不同，使用时需注意兼容性。进阶方法包括定义CSS类统一管理样式，或借助编辑器插件实现颜色控制。核心限制在于保持Markdown的跨平台性，需权衡视觉效果与文档可移植性。

			
		

	



		

			
		



	

		

			

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

				
			

			

				

					nings666的博客
				

				

					11-24
					
					1万+
					
				

			

		

		

			
				
最近写文章时，发现需要使用一些不同的Markdown语法来显示，在此整理和记录下这些语法，同时分享给大家。以上就是文章的全部内容，本文仅仅简单介绍了 Markdown 如何自定义字体样式，而Markdown还有其他丰富的语法，待后续总结后记录和分享。

			
		

	





	

		

			

				
					
CSDN-markdown 表格样式设置（跨行表格，背景色等）

				
			

			

				

					走过的都是未来
				

				

					08-26
					
					3万+
					
				

			

		

		

			
				
本文介绍 CSDN-markdwon 中借助 html 实现表格背景色设置以及特殊表格样式的实现。

			
		

	





	

		

			

				
					
markdown转html带样式

				
			

			

				

					11-20
				

			

		

		

			
				
markdown转html带样式，使用github-markdown-css样式，如果积分不够直接去这个链接https://blog.csdn.net/isyoungboy/article/details/81286611 复制代码即可

			
		

	





	

		

			

				
					
Markdown (CSDN) MD编辑器（二）- 文本样式(更改字体、字体大小、字体颜色、加粗、斜体、高亮、删除线)

				
			

			

				

					wkd_007的博客
				

				

					04-18
					
					2万+
					
				

			

		

		

			
				
介绍使用 markdown 编辑器时，利用html的 font、mark、strong、em、del、big、small等标签改变文本的颜色、字体、字体大小、加粗字体、斜体、高亮等

			
		

	





	

		

			

				
					
CSDN-markdown 文字样式设置（字体, 大小, 颜色, 高亮底色）

					
热门推荐

				
			

			

				

					走过的都是未来
				

				

					08-11
					
					4万+
					
				

			

		

		

			
				
本文介绍与文字格式的相关设置语法，包括字体、大小、颜色和高亮背景色。并且介绍了表格中格子背景色的设置。

			
		

	





	

		

			

				
					
Markdown字体设置

				
			

			

				

					qq_35147871的博客
				

				

					01-13
					
					1917
					
				

			

		

		

			
				
本版本是对作者的简化版本，可用快速上手
1.语法

我是楷体

小技巧：font敲完以后，使用shift+方向键，Ctrl+c进行复制

2.说明

face:黑体 楷体 宋体，直接填在引号里面
color:red bule green yellow orange grey，用单词不要用16进制
对颜色微调：light/medium/dark+颜色(不一定可用）

作者原链接：https://blog.csdn.net/u011995719/article/details/77232626

...

			
		

	





	

		

			

				
					
使用命令实现Markdown转pdf，自定义pdf样式 工具链

				
			

			

				

					02-10
				

			

		

		

			
				
在LaTeX中，你可以定义页眉、页脚、字体、颜色等样式元素。然后在转换时指定这个模板：  ```  pandoc example.md --template=custom_template.tex -o example.pdf  ```  在`custom_template.tex`中，你可以根据需求...

			
		

	





	

		

			

				
					
支持自定义样式的在线微信Markdown排版工具

				
			

			

				

					08-12
				

			

		

		

			
				
这通常涉及到CSS（层叠样式表）技术，通过CSS，用户可以调整字体、颜色、布局等元素，让最终生成的HTML更加符合自己的需求。  JavaScript是实现这类编辑器的关键技术。JavaScript是一种客户端脚本语言，常用于网页和...

			
		

	





	

		

			

				
					
makedown 中自定义字体大小与颜色

				
			

			

				

					再来一下！
				

				

					08-20
					
					1241
					
				

			

		

		

			
				
自定义颜色与字体大小

			
		

	





	

		

			

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

				
			

			

				

					qq_41941900的博客
				

				

					05-27
					
					1357
					
				

			

		

		

			
				
最近写文章时，发现需要使用一些不同的Markdown语法来显示，在此整理和记录下这些语法，同时分享给大家。以上就是文章的全部内容，本文仅仅简单介绍了 Markdown 如何自定义字体样式，而Markdown还有其他丰富的语法，待后续总结后记录和分享。

			
		

	





	

		

			

				
					
Markdown之设置字体、粗体、颜色、居中显示等(十二)

				
			

			

				

					Android系统攻城狮
				

				

					04-03
					
					3488
					
				

			

		

		

			
				
本篇目的：Markdown之设置字体、粗体、颜色、居中显示等操作。

			
		

	





	

		

			

				
					
Markdown 字体格式

				
			

			

				

					ivenqin的博客
				

				

					02-19
					
					783
					
				

			

		

		

			
				
字体加粗和倾斜设置
Markdown中的字体格式有如下几种：

字体加粗：在字体前后各加两个星号**或两个下划线_

**字体加粗**
__字体加粗__


字体倾斜：在字体前后各加一个星号**或一个下划线_

*字体倾斜*
_字体倾斜_


字体加粗并倾斜：在字体前后各加三个星号**或三个下划线_

***字体加粗并倾斜***
___字体加粗并倾斜___

字体大小和颜色设置
markdown编...

			
		

	





	

		

			

				
					
Markdown常用字体 大小 颜色和背景设置

				
			

			

				

					Yang的博客
				

				

					04-10
					
					3685
					
				

			

		

		

			
				
Markdown常用字体 大小 颜色和背景设置

			
		

	





	

		

			

				
					
markdown常用字体

				
			

			

				

					qq_45898383的博客
				

				

					06-15
					
					2031
					
				

			

		

		

			
				
第一章：练习HTML的各种值@[TOC](第一章：练习HTML的各种值)








			
		

	





	

		

			

				
					
markdown给字体上颜色

				
			

			

				

					03-28
				

			

		

		

			
				
<think>好的，用户现在问的是如何在Markdown中给字体上颜色。这个问题看起来挺常见的，可能用户在使用Markdown写文档或者博客的时候，想要让文字更突出，但不知道具体的语法。

首先，我得回忆一下Markdown的标准语法。标准的Markdown其实不支持直接改变字体颜色，它主要是用来简化HTML的书写，所以大部分格式都是通过简单的符号来实现，比如加粗、斜体这些。不过用户的需求是改变颜色，所以可能需要用到HTML或者CSS的方法。

接下来，我需要确定用户的具体使用场景。比如他们是在GitHub上写README，还是在用Jupyter Notebook，或者是其他支持Markdown的平台？因为不同的平台对Markdown的支持程度不同。比如GitHub可能不允许内联CSS，而一些本地编辑器或者支持扩展Markdown的平台（比如Typora、Obsidian）可能允许使用HTML和CSS。

然后，我需要整理几种常见的方法。首先，内联HTML可能是最直接的方式，比如用`<span style="color:red">红色文字</span>`。这种方法在支持HTML的地方有效，但可能在部分平台被过滤掉。其次，使用Latex的文本颜色命令，比如`\textcolor{red}{红色文字}`，但这种方法需要平台支持Latex渲染，通常是在结合MathJax或者KaTeX的情况下使用，比如一些博客系统或者Jupyter Notebook。

另外，可能还需要提到一些特定平台的自定义语法，比如在GitHub的Markdown中，字体颜色无法直接通过HTML或CSS修改，可能需要用图片或者其他替代方法。而像Typora这样的编辑器，支持通过CSS样式来修改颜色，但用户可能需要自定义主题或者使用内联样式。

还需要注意安全性问题，比如在允许用户输入Markdown的网站上，使用HTML可能有安全风险，所以有些平台会禁用HTML标签，这时候用户的方法可能无效。这时候可能需要寻找其他替代方案，比如使用代码块的高亮，或者利用表情符号等来引起注意，但这不是改变字体颜色。

另外，用户可能对HTML和CSS不太熟悉，所以需要给出具体的例子，让他们可以直接复制粘贴，修改颜色值和文字内容。比如给出红色的例子，蓝色的例子，以及使用十六进制颜色代码的例子。

最后，要提醒用户不同平台的兼容性问题，建议他们在使用前先测试目标平台是否支持相应的语法。如果用户是在编写学术文档或者需要复杂排版，可能需要考虑使用Latex而不是Markdown，因为Latex对颜色和排版的支持更全面。

总结下来，回答的结构应该是先说明标准Markdown的限制，然后介绍可行的替代方法，包括HTML内联样式、Latex语法，以及特定平台的注意事项，并给出示例代码和兼容性提示。同时，提醒用户潜在的安全限制和平台差异，确保他们能够根据自身环境选择合适的方法。</think>在Markdown中，**原生语法不支持直接设置字体颜色**，但可以通过以下扩展方法实现颜色自定义：

---

### 🔧 方法1：HTML内联样式（通用性最佳）
```markdown
<span style="color:red">红色文字</span>  
<span style="color:#00ff00">绿色文字（HEX格式）</span>  
<span style="color:rgb(0,0,255)">蓝色文字（RGB格式）</span>
```
**效果**：  
<span style="color:red">红色文字</span>  
<span style="color:#00ff00">绿色文字（HEX格式）</span>  
<span style="color:rgb(0,0,255)">蓝色文字（RGB格式）</span>

**适用场景**：  
- 支持HTML渲染的Markdown解析器（如GitHub Pages、Jekyll、Typora等）

---

### 🔧 方法2：LaTeX语法（需环境支持）
```markdown
$\textcolor{red}{红色文本}$  
$\textcolor{#00ff00}{绿色文本}$  
$\textcolor[rgb]{0,0.5,0.5}{自定义RGB}$
```
**效果**（需启用MathJax/Katex）：  
$\textcolor{red}{红色文本}$  
$\textcolor{#00ff00}{绿色文本}$  
$\textcolor[rgb]{0,0.5,0.5}{自定义RGB}$

**适用场景**：  
- 学术论文写作（Markdown + LaTeX混合环境）
- 支持数学公式渲染的平台（如Jupyter Notebook）

---

### 🔧 方法3：特定平台扩展语法
#### 示例1：Obsidian（通过CSS片段）
```markdown
<span class="red-text">自定义红色</span>

/* 在CSS片段文件中添加 */
.red-text { color: red; }
```

#### 示例2：Typora（直接内联CSS）
```markdown
<style>
.blue { color: blue; }
</style>
<span class="blue">蓝色文字</span>
```

---

### ⚠️ 注意事项
1. **平台兼容性**  
   | 平台              | HTML支持 | LaTeX支持 | CSS支持 |
   |-------------------|----------|-----------|---------|
   | GitHub/GitLab     | ❌        | ❌         | ❌       |
   | Jupyter Notebook  | ✅        | ✅         | ✅       |
   | Typora/Obsidian   | ✅        | ✅         | ✅       |
   | VS Code预览       | ✅        | ✅         | ❌       |

2. **安全限制**  
   - 部分网站（如GitHub）会过滤HTML标签以防止XSS攻击

3. **响应式设计建议**  
   ```html
   <!-- 使用语义化颜色名称或CSS变量 -->
   <span style="color:var(--primary-color)">动态颜色</span>
   ```

---

### 🌰 综合应用示例
```markdown
# 彩虹标题
<span style="color:red">R</span>
<span style="color:orange">A</span>
<span style="color:yellow">I</span>
<span style="color:green">N</span>
<span style="color:blue">B</span>
<span style="color:purple">O</span>
<span style="color:violet">W</span>
```

**效果**：  
<span style="color:red">R</span>
<span style="color:orange">A</span>
<span style="color:yellow">I</span>
<span style="color:green">N</span>
<span style="color:blue">B</span>
<span style="color:purple">O</span>
<span style="color:violet">W</span>

根据具体使用场景选择最适合的方案，优先推荐HTML内联样式作为通用解决方案。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值