How to style code strings

Dear Jekyllers:

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?

Thanks, best, Michael

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:

/**
 * Code formatting
 */
pre,
code {
  @include relative-font-size(0.9375);
  border: 1px solid $grey-color-light;
  border-radius: 3px;
  background-color: #eef;
}

code {
  padding: 1px 5px;
}

pre {
  padding: 8px 12px;
  overflow-x: auto;

  > code {
    border: 0;
    padding-right: 0;
    padding-left: 0;
  }
}

I changed background-color to background-color: blue; and as you can see from the screenshot it worked no problem:

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.

Yes, thanks guys. So changing style for “code” works, and I also found that I can define a class in my main SCSS file like so

.language-plaintext {
	font-family: $fontMonospace;
	font-weight: bold;
}

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.