如何更改GitHub上Markdown代码块的背景颜色代码

Question

我正在使用以下语法

```yaml
 stages:
   - build
   - test
   - deploy
```

这可以帮助我得到正确的文本颜色和设置盒子，但是如何改变盒子的背景颜色。

- mayur rahatekar

---

可能是在Markdown中添加灰色区域的重复问题。 - Waylan

Answer 1

在 README 中，代码块没有黑色主题，但是您可以通过在 <pre> 标签或 <code> 中添加一些自定义样式来解决此问题：

code[class*="language-"], pre[class*="language-"]
  border-radius: 6px
  text-shadow: 0 1px #14161800 !important
  background: #242424 !important
  span.token.operator
    background: none
  span.token.keyword
    color: #866cba

注意：这是一种Sass样式的写法。

- Ahmad Salih

Answer 2

TL;DR: 当GitHub使用自己的风格渲染文档时，会覆盖您应用于文档的任何样式。

但是，在其他地方，如果您将其包装在<div> ... </div>对中，则可以使用HTML和CSS来实现此操作：

# Code

## Vanilla

``python
print("hello world!")
``

## Flavored V1

<div style="background-color: rgb(50, 50, 50);">

``python
print("Yo!")
``

</div>

我不得不从我的示例代码中删除每个代码段中的反引号`，以便在此处正确呈现它。

上面的文件在VSCode上呈现如下：

你可以使用CSS进一步改变外观，但我不建议这样做。

附言：GitHub在设置中提供了全局暗色主题。

- M.H. Tajaddini

---

抱歉，这对我不起作用。在检查生成的Github维基页面时，<div>不包含stype属性，它被呈现为只有<div>，导致了常规背景。 - Leonardo

@Leonardo，确实，正如我在我的答案中提到的那样，GitHub会覆盖您的格式。然而，由于问题有点模糊，我建议在其他MarkDown版本上进行操作的方法。 - M.H. Tajaddini