Background highlight text in a code block?

不问归期 提交于 2019-12-12 12:13:14

问题


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

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?


回答1:


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>


来源:https://stackoverflow.com/questions/58828654/background-highlight-text-in-a-code-block

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!