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

最近在学习用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在控制代码块的背景颜色，替换成自己想要的颜色就行了，另外，这个地方的字体大小也可以调。

========================================
最终调试效果图如下，看起来就舒服多了，颜色是#BDB76B,字号大小是20px:

个人博客修改markdown代码块背景颜色相关推荐

typora修改主题字体、代码块字体、行内块代码字体大小、引用块字体大小、代码块背景颜色、文章可写区域宽度以及修改教程
目录 0. 授人以渔 1.主题字体 2.代码块字体大小 3.引用块字体大小 4.代码块背景颜色 ①pink老师的样式代码 ②自己搜到的样式 5.块代码字体大小 6.修改文章可写区域的宽度 0. 授人以 ...
CSDN上代码块背景颜色的设置
CSDN上代码块背景颜色的设置今天发博客的时候发现代码块背景的颜色是白色的,我想要改成黑色的,于是就研究了一下怎么修改代码块背景的颜色,修改代码块的背景颜色只要4步. 1.点击个人头像打开管 ...
如何在CSDN博客中插入代码块并【显示行号】
最近在学习java语言,想要通过写博客来记录自己的学习过程以便以后查阅,由于本人博客小白,总是在写作过程中需要插入代码片段时而无从下手,排版不忍直视,通过借鉴其他同学的博客,整理如下和大家分享. 例如 ...
怎样在CSDN博客里插入代码块并且让代码有颜色，显示高亮？（只需要指定语言种类就好，附详细方法）
用两种编辑器都可以,在最上面的(标题下面的)菜单选项里面,找到一对尖括号(如< >),然后就可以把你的代码复制过来,粘贴在里面了.然后,想要显示颜色的话,就在插入代码片的最前面(...之后 ...
CSDN博客中Markdown代码转为pdf
目录比较差劲的简单方法使用VSCode的进阶方法比较差劲的简单方法 CSDN中Markdown的编辑器很适合做科研笔记用,但是网站自身并不支持输出pdf格式,当然我们可以用浏览器自带的'另存为p ...
如何在CSDN博客中插入代码块显示行号
最近在学习java语言,想要通过写博客来记录自己的学习过程以便以后查阅,由于本人博客小白,总是在写作过程中需要插入代码片段时而无从下手,排版不忍直视,通过借鉴其他同学的博客,整理如下和大家分享. 例如 ...
hexo博客修改博文中日期的颜色
代码中: themes/yelee/source/css/_partial/article.styl 修改代码: .article-metaposition absoluteright 0top 23 ...
markdown mysql高亮_修改博客园markdown编辑器代码高亮风格的方法
作为一个工程师,追求极致与艺术也应当成为我们生活中的一部分,作为自己的心爱之物--博客,当然也得装扮一下,我对代码高亮有自己所喜欢的风格~还好程序员的世界总是共通的,已经有前辈开发了一些代码高亮的样式 ...
改进博客园Markdown显示功能(加代码行号、显示代码所用编程语言)
博客园的markdown模式下的代码高亮功能使用的是highlight.js,没有行号和显示相应编程语言的功能,只好自己将其改造了一下(将这两种功能一并实现了)~ 先看一下效果,再详细介绍方法~ 查看 ...
CSDN 博客修改文章搜索为 bing 搜索，且只搜索自己的博客的方法
CSDN 博客修改文章搜索为 bing 搜索,且只搜索自己的博客的方法 csdn 自带的博客搜索调用的百度的代码,但是搜索效果很不理想,而且默认为全站搜索. 在我们的博客里面进行搜索的大多数人,都应 ...

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

个人博客修改markdown代码块背景颜色相关推荐

最新文章

热门文章

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

个人博客 修改markdown代码块背景颜色相关推荐

最新文章

热门文章

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

个人博客修改markdown代码块背景颜色相关推荐