Distinguish between single backtick and triple backticks?

support
1

Hello!

I’m starting out a bit with Hugo and I’m facing a problem.

I want to apply different styles for inline code (single backtick) an multiline code (pygmentsCodeFences or <highlight language_name>)

The problem here is: both get inside a <code> element (which is nice) but not exactly what I want.

I’m using https://gohugo.io/content-management/syntax-highlighting/ for what I refer to multiline code, which works pretty well! But I want to use a different style for text between single backticks.

Is there a way to tell hugo make this difference, or can I do some workaround using CSS?

Thank you very much in advance!

2

Welcome to the forums @SeveFP. As you mentioned, CSS is what you need. A quick hint

code {
  /* will target single backtick */
}

pre,
pre code {
/* will target triple backtick */ 
}
2 Likes