wordpress css样式修改

0x1 问题背景

我是安装了插件 WP Githuber MD 的，这款插件可以以 markdown 的风格编辑并且展示文章，但在使用了 Wing 主题后，发现表格预览是正常的，但是发布文章后不生效。

预览如下图：

发布后效果如下图：

根据现象来看，应该是 css 样式问题，编辑页面预览可能是用的一套 css，发布文章后可能是使用的主题的 css 了。并且还有一个问题是，使用了这个主题后md的代码部分字体颜色变成了红色，不太喜欢

0x2 如何解决

因为这个主题我也是比较喜欢的，所以尝试解决的方法是使用 wordpress 提供的额外CSS功能来修改当前的CSS，进入方法：找到主题->自定义->额外CSS。

修改代码字体颜色的方式 首先要找到具体渲染的代码，打开发布的文章，打开浏览器F12，切换到 Elements 中，定位到对应的元素，然后右侧切换到Style，这时候虽然看不懂具体是哪个代码渲染的颜色，但是我们可以手动匹配下，如下图：我的代码字体是红色，那么我尝试修改上面两个红色为其他颜色，即可定位出到底是哪个生效，然后根据右上显示的请求资源 style.css 去服务器找到这个文件对应的行，把代码贴入额外CSS中，实际找到的如下：

code {
  border-radius: 0.2rem;
  line-height: 1.25;
  padding: 0.1rem 0.2rem;
  background: #fcf2f2;
  color: #757575;
  font-size: 70%;
}

有了这个代码，还可以修改字体大小等操作

增加或者修改表格样式 有了上面的经验，我在浏览器看了 Elements 表格的 css，但是这部分代码比字体的多，而且复杂，所以我直接在网上找了一个，还比较好用，如下：

/**  解决主题覆盖了md表格样式的问题 */
 table {
    display: block;
    width: 100%;
    overflow: auto;
    border-collapse: collapse;
       margin: 15px auto; /*外边距*/
}
 table thead tr {
    background-color: #f8f8f8;
}
 table tbody{
    border: 1px solid #dfe2e5;
}
 table th {
    font-weight: 600;
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
}
 table tr {
    background-color: #fff;
    border-top: 1px solid #c6cbd1;
}
 table tr:nth-child(even){
    background-color: #fff;
}
 table td {
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
}

其他样式定制 有了上面的成功案例，又再网上找了一些好玩的东西，比如修改滚动条颜色，如下：

/**彩色滚动条样式*/
::-webkit-scrollbar {
  width: 10px;  
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: #12b7f5;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #f6f6f6;
}