html - 代码块中的背景突出显示文本？

Question

我的目标是能够显示如下内容:

我想背景突出显示代码块中的一段代码，该代码块已经具有语法突出显示。我想在 Github Pages 上托管的 Github 上的 Markdown 文件上执行此操作(可以使用 kramdown markdown、html、css)。

我知道您可以在代码块中使用语法高亮显示来执行以下操作:

```java
int foo (void) {
    int i;
}
```

我也知道我可以通过执行以下操作背景突出显示代码块中的文本:

<pre><code>int foo (void) {
    <span style="background-color:yellow">int i;</span>
}
</code></pre>

但我如何将这两者结合起来呢？

Answer 1

您可以使用 Google 的 code-prettify给代码上色。它将使用类 prettyprint 为所有代码着色。 .然后你可以使用 <span>标签设置背景颜色。

pre {
  background-color: #eee;
  border-radius: 5px;
}

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
  <pre>
    <code class="prettyprint">
 int foo (void) {
   <span style="background-color:yellow">int i;</span>
 }
 // Yay code and it has colors
    </code>
  </pre>