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

【问题标题】：Background highlight text in a code block?代码块中的背景突出显示文本？
【发布时间】：2019-11-13 00:26:53
【问题描述】：

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

我想背景突出显示代码块中已经有语法突出显示的一段代码。我想对托管在 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>

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

【问题讨论】：

我知道我可以在文字处理器中执行此操作，对其进行截图，然后将截图图像嵌入到我的降价文件中。但是，您不能在图像中选择文本，所以我想知道是否有一种使用 markdown、html 和/或 css 的更简单的方法。

标签： html css markdown github-pages kramdown

【解决方案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>

【讨论】：