Render `pre` tags in same style as code blocks in CSS

Question

I recently came across the niggle of odd formatting of code chunks when the code chunk includes R syntax with a number of $ characters. @whuber has suggested a workaround that involves adding an extra $ in a comment, which resolves the problem.

As my question showed, the problem doesn't arise if one explicitly marks the block up with <pre>...</pre> tags, presumably because the chunk is included verbatim and not rendered by the Markdown (MD) processor. However, there are subtle differences in styling of blocks marked up with <pre>...</pre> tags and those marked as code chunks in MD. The latter are rendered as <pre><code>....</code></pre>.

Is it possible to tweak the CSS here to render plain <pre>....</pre> marked sections with the same styles as <pre><code>....</code></pre>? That would make using this as a work around less noticeable but not require the user to remember to nest <code> within <pre> to get the required styling?

Example

First a standard code block indicated using MD

foo <- lm(y ~ x1 + x2)
summary(foo)

Next a chunk entered as verbatim HTML via <pre>...</pre> tags only

foo <- lm(y ~ x1 + x2)
summary(foo)

Finally, a chunk entered verbatim but wrapped in <pre><code>...</code></pre>

foo <- lm(y ~ x1 + x2)
summary(foo)

Notice the subtle styling differences in sizes.

Answer 1

Hmm, scratch that.

Adding <pre> tags just makes this worse as unless you encode html entities like < which is much more of a pain for R code than adding a comment and an extra $. I'll leave this open for a wee while to see if anyone has anything else to suggest/contribute, but otherwise I should probably close or delete this as appropriate.