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

问题描述

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

My goal is to be able to display something like this:

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

I want to background highlight a piece of code inside a code block that already has syntax highlighting. I want to do this on a markdown file I have on Github that is hosted on Github Pages (can use kramdown markdown, html, css).

我知道您可以在代码块中使用语法突出显示，例如:

I am aware that you can have syntax highlighting inside a code block doing something like this:

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

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

I am also aware that I can background highlight text inside a code block by doing something like this:

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

但是我如何将这两件事结合起来?

But how do I combine these two things?

推荐答案

我使用了Google的 code-prettify 为代码着色.它将使用类prettyprint为所有代码着色.然后使用<span>标记设置背景颜色.

I used Google's code-prettify to color the code. It will colorize all code with the class prettyprint. Then I used a <span> tag to set the background color.

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>

这篇关于代码块中的背景突出显示文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！