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

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

我想要背景突出显示已经有的代码块内的一段代码语法高亮。我想在 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>

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

你可以使用谷歌的代码美化 https://github.com/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>