In my markdown file, I want to indicate code snippets, sometimes single words. So I use
`string`
which compiles to <code class="language-plaintext highlighter-rouge">string</code>
All good so far. Now I want to change the CSS style for the class “language-plaintext”. Do I need to change some rouge settings, or simply create a corresponding CSS class?
if you inspect it in chrome as is does that selector have styles?
I don’t think rouge creates any styles on its own - I think it just uses whatever style sheet you have that has those selectors. At least the last time I used it I remember not having any styles show until I went and found a stylesheet and added that to my site.
I am looking at the minima theme and it looks like it creates the code block in /_sass/minima/_base.scss. Here is the code formatting that the default theme performs:
I think the final answer here, is go ahead and modify the theme you have or create and attach your own stylesheet using the general concepts used by the minima them I list above.
and it achieves the desired effect. With this approach I can also style different languages in different style, should I so wish. BTW: I’m not using a theme, that is quite possible, as previously discussed.