问题
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