# How to style code strings

**URL:** <https://talk.jekyllrb.com/t/how-to-style-code-strings/7341>\
**Category:** Help\
**Created:** [May 20, 2022, 8:49am UTC](https://talk.jekyllrb.com/t/how-to-style-code-strings/7341 "2022-05-20T08:49:52Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![michaelbach](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelbach/32/2151_2.png) [@michaelbach](https://talk.jekyllrb.com/u/michaelbach)\
**Post date:** [May 20, 2022, 8:49am UTC](https://talk.jekyllrb.com/t/how-to-style-code-strings/7341/1 "2022-05-20T08:49:52Z")

</div>

Dear Jekyllers:

In my markdown file, I want to indicate code snippets, sometimes single words. So I use

```auto
`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

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [May 20, 2022, 3:11pm UTC](https://talk.jekyllrb.com/t/how-to-style-code-strings/7341/2 "2022-05-20T15:11:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![BillRaymond](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/billraymond/32/5963_2.png) [@BillRaymond](https://talk.jekyllrb.com/u/BillRaymond)\
**Post date:** [May 20, 2022, 7:28pm UTC](https://talk.jekyllrb.com/t/how-to-style-code-strings/7341/3 "2022-05-20T19:28:40Z")

</div>

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:

```auto
/**
 * 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:

 ![Screen Shot 2022-05-20 at 12.22.39 PM](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/f/fca7d3f2a2eca19d80d16652c79d1fcf4f3f2b68.png)

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.

---

<div class="post-metadata">

**Author:** ![michaelbach](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelbach/32/2151_2.png) [@michaelbach](https://talk.jekyllrb.com/u/michaelbach)\
**Post date:** [May 20, 2022, 7:55pm UTC](https://talk.jekyllrb.com/t/how-to-style-code-strings/7341/4 "2022-05-20T19:55:06Z")

</div>

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

```auto
.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.