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

Question

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

我想背景突出显示代码块中的一段代码，该代码块已经语法突出显示。我想在 Github 上托管在 Github 页面上的降价文件上执行此操作（可以使用 kramdown 降价，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>

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

Background highlight text in a code block?

html

css

markdown

github-pages

kramdown