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

Question

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

我想在已经具有语法突出显示的代码块内对一段代码进行背景突出显示。我想在 Github 上托管于 Github Pages 上的 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为代码着色。它将使用 class 为所有代码着色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>