更改以“#”开头的行的 css 属性，如颜色和背景<pre></pre>

Question

I am trying to add a minimal code syntax highlighting rule to a web page by only changing the color of comments - lines starting with "#" symbol within the <pre><code> tags.

To my surprise I could not find information about this by searching on StackOverflow. However projects such as ft-syntax-highlight make me assume this to be possible.

Is it possible to adjust the color of lines starting with "#" in the following code block using only css?:

<pre><code>
# function to do something
do_something_here(x1, x2);
</code></pre>

And if so - how?

Answer 1

Probably not what you're looking for but a minimal workaround would be using CSS's content and :before

View in jsfiddle

[comment]:before {
  content: "# " attr(comment);
  color: red;
  white-space: pre-wrap;
  width: 45vw;
  display: inline-block;
}

<pre>
<code comment="function to do something here line function to do something here line function to do something here line">
do_something_here(x1, x2);
</code>

<code comment="you can use `missing()` to test whether or not the argument y was supplied">
fooBar <- function(x,y){
  if(missing(y)) {
      x
  } else {
      x + y
  }
}
</code>
</pre>

Note: use data-comment instead of comment for better html semantics