个人博客修改markdown代码块背景颜色

最新推荐文章于 2025-04-29 10:49:27 发布

blackeagleoht

最新推荐文章于 2025-04-29 10:49:27 发布

阅读量1.7w

点赞数 11

分类专栏： python学习 markdown学习经验

本文链接：https://blog.youkuaiyun.com/blackeagleoht/article/details/88882457

版权

python学习同时被 3 个专栏收录

19 篇文章

订阅专栏

经验

9 篇文章

订阅专栏

markdown学习

2 篇文章

订阅专栏

本文介绍了如何修改使用django搭建的个人博客中markdown代码块的背景颜色。通过找到相关CSS文件，定位到控制背景颜色的代码，并用替换颜色值的方法进行调试，最终成功将背景颜色更改为理想颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习用django搭建个人博客系统，在博客中添加了markdown功能，如下图中的代码块背景色是浅灰色：
在这里插入图片描述
感觉这个浅灰色颜色不太好看，想换个颜色，最终找到了修改代码块颜色的地方，修改后代码块颜色如下图（黄色也不大好看，这里只是介绍修改颜色的方法，具体什么颜色好看还需要自己多尝试替换几种颜色）：
在这里插入图片描述

下面说一下修改方法。
这里先说一下参考的搭建个人blog的教程：django搭建个人博客系统教程
此教程中用到的博客前端模板下载地址是博客样式文件
样式文件如下图所示：
在这里插入图片描述

===========================================================
css目录下文件如下图所示：
在这里插入图片描述

css\highlights目录下是代码块风格的css文件，如下图：

在这里插入图片描述
以github.css为例，如下图：

这个文件中有很多有关颜色的代码，但是这些颜色是设置代码块字体的，即使修改background-color，代码块背景颜色也不会更改，其实和代码块背景颜色有关的设置是在\css\bootstrap.min.css文件中的。

打开\css\bootstrap.min.css文件，内容如下：
在这里插入图片描述
搜索·background·关键字有200多项

怎么确定是哪个在控制代码块的背景颜色呢，这里介绍一个快捷的查找方法，是自己慢慢摸索出来的。

首先，打开自己的博客文章页面，获取代码块的当前颜色（用qq截图获取），如下图：
在这里插入图片描述
用qq截图，鼠标放到代码块背景色的位置，显示rgb颜色为(245,245,245)，需要转换为十六进制的RGB颜色，推荐网站rgb转16进制颜色代码转换
如下图：

(245,245,245)对应的十六进制rgb为#F5F5F5，在\css\bootstrap.min.css文件中搜索F5F5F5,可以看到有11个匹配项，如下图：
在这里插入图片描述
此时，就可以用比较暴力的方法先检测一下（提前把\css\bootstrap.min.css文件备份一下），把所有的F5F5F5替换为FFFF00，FFFF00代表黄色，打开自己的博客文章，刷新一下，果然发现代码块的背景颜色变成了黄色，因为刚刚把所有的11个F5F5F5全都给替换掉了，现在应该确定这11个中哪个才是关键点，只需要逐个尝试就行了。
这里直接把结果写出来是哪个地方在控制：{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px},就是这个代码中F5F5F5在控制代码块的背景颜色，替换成自己想要的颜色就行了，另外，这个地方的字体大小也可以调。