# How to add different class to inline code vs code blocks?

**URL:** <https://discourse.gohugo.io/t/how-to-add-different-class-to-inline-code-vs-code-blocks/38839>\
**Category:** support\
**Created:** [May 28, 2022, 11:56am UTC](https://discourse.gohugo.io/t/how-to-add-different-class-to-inline-code-vs-code-blocks/38839 "2022-05-28T11:56:43Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![SanJacobs](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sanjacobs/32/17008_2.png) [@SanJacobs](https://discourse.gohugo.io/u/SanJacobs)\
**Post date:** [May 28, 2022, 11:56am UTC](https://discourse.gohugo.io/t/how-to-add-different-class-to-inline-code-vs-code-blocks/38839/1 "2022-05-28T11:56:43Z")

</div>

Hi! I’m gonna get right to it. I want `code blocks like this` to receive `class="inline-code"`, and

```nohighlight
code blocks like this

```

to receive `class="code-block"`.

How would I do this?

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwintx/32/10450_2.png) [@bwintx](https://discourse.gohugo.io/u/bwintx)\
**Post date:** [May 28, 2022, 12:55pm UTC](https://discourse.gohugo.io/t/how-to-add-different-class-to-inline-code-vs-code-blocks/38839/2 "2022-05-28T12:55:30Z")

</div>

Just to clarify — you want to be able to control the class names that Chroma applies for each of those cases?

---

<div class="post-metadata">

**Author:** ![SanJacobs](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sanjacobs/32/17008_2.png) [@SanJacobs](https://discourse.gohugo.io/u/SanJacobs)\
**Post date:** [May 28, 2022, 12:56pm UTC](https://discourse.gohugo.io/t/how-to-add-different-class-to-inline-code-vs-code-blocks/38839/3 "2022-05-28T12:56:26Z")

</div>

I don’t think I’m using chroma? I’m not doing any syntax highlighting, at least.

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwintx/32/10450_2.png) [@bwintx](https://discourse.gohugo.io/u/bwintx)\
**Post date:** [May 28, 2022, 12:57pm UTC](https://discourse.gohugo.io/t/how-to-add-different-class-to-inline-code-vs-code-blocks/38839/4 "2022-05-28T12:57:07Z")

</div>

You are if you’re using the built-in syntax highlighting. 😀

---

<div class="post-metadata">

**Author:** ![SanJacobs](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sanjacobs/32/17008_2.png) [@SanJacobs](https://discourse.gohugo.io/u/SanJacobs)\
**Post date:** [May 28, 2022, 12:58pm UTC](https://discourse.gohugo.io/t/how-to-add-different-class-to-inline-code-vs-code-blocks/38839/5 "2022-05-28T12:58:23Z")

</div>

Right, I see, then I’m definitely not using chroma. I’m not doing any syntax highlighting, just putting stuff in `<code>` tags and that’s it. 😅 It is those code tags that I would like to receive the `class`es.

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwintx/32/10450_2.png) [@bwintx](https://discourse.gohugo.io/u/bwintx)\
**Post date:** [May 28, 2022, 1:01pm UTC](https://discourse.gohugo.io/t/how-to-add-different-class-to-inline-code-vs-code-blocks/38839/6 "2022-05-28T13:01:34Z")

</div>

If you use it, you’ll get the desired highlighting, although AFAIK you can’t control the class names it assigns. It’s really impressive once you learn some of its tricks.

> **[Syntax Highlighting](https://gohugo.io/content-management/syntax-highlighting/)**
>
> Hugo comes with really fast syntax highlighting from Chroma.

---

<div class="post-metadata">

**Author:** ![SanJacobs](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sanjacobs/32/17008_2.png) [@SanJacobs](https://discourse.gohugo.io/u/SanJacobs)\
**Post date:** [May 28, 2022, 1:04pm UTC](https://discourse.gohugo.io/t/how-to-add-different-class-to-inline-code-vs-code-blocks/38839/7 "2022-05-28T13:04:29Z")

</div>

Yeah, I’m not really interested in syntax highlighting at all. I just want to be able to select for `inline code like this` using css.

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwintx/32/10450_2.png) [@bwintx](https://discourse.gohugo.io/u/bwintx)\
**Post date:** [May 28, 2022, 1:08pm UTC](https://discourse.gohugo.io/t/how-to-add-different-class-to-inline-code-vs-code-blocks/38839/8 "2022-05-28T13:08:16Z")

</div>

So, IOW, you want the CSS classes for syntax highlighting but not the actual highlighting itself. Do I understand correctly? Because otherwise I guess I just don’t get what you want to do. Obviously, `<code>` (e.g.) will always get what you want.

---

<div class="post-metadata">

**Author:** ![SanJacobs](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sanjacobs/32/17008_2.png) [@SanJacobs](https://discourse.gohugo.io/u/SanJacobs)\
**Post date:** [May 28, 2022, 1:12pm UTC](https://discourse.gohugo.io/t/how-to-add-different-class-to-inline-code-vs-code-blocks/38839/9 "2022-05-28T13:12:32Z")

</div>

I don’t want syntax highlighting, if what you mean is changing text color within code fields. I just want to differentiate between `these types of code blocks` and

```auto
these types of code blocks

```

using classes.

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwintx/32/10450_2.png) [@bwintx](https://discourse.gohugo.io/u/bwintx)\
**Post date:** [May 28, 2022, 1:18pm UTC](https://discourse.gohugo.io/t/how-to-add-different-class-to-inline-code-vs-code-blocks/38839/10 "2022-05-28T13:18:41Z")

</div>

OK. So syntax, but no colors. In that case, you’re probably just better off with manually using `<code>` and `<pre>` and the like. If classes are important, it would be fairly easy (although perhaps less convenient) to specify in CSS that certain blocks are `monospace`, certain are that with different backgrounds, etc. TBH, sounds like a lot more work 🙂 but it’s certainly doable.

OTOH, you could still use Chroma and just indicate each item as `plaintext` — that gives you no special text colors yet sets it apart. (The one-backtick thing doesn’t do colors anyway.)

And I must go now. Maybe others can be more helpful. Good luck!

---

<div class="post-metadata">

**Author:** ![SanJacobs](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sanjacobs/32/17008_2.png) [@SanJacobs](https://discourse.gohugo.io/u/SanJacobs)\
**Post date:** [May 28, 2022, 4:23pm UTC](https://discourse.gohugo.io/t/how-to-add-different-class-to-inline-code-vs-code-blocks/38839/11 "2022-05-28T16:23:52Z")

</div>

I wouldn’t call that syntax, but maybe we’re using different definitions. I don’t think my question really has anything to do with syntax, other than the markdown used to write this stuff.

I don’t need chroma. I’m not trying to do anything special within the `<code>` blocks. They are already monospace and all that.

The problem with `<pre>` is that the code inside still uses the `<code>` tag, so I can’t make changes to `<code>`'s style, without also changing what is going on inside `<pre>` tags.

Cheers, man. Have a good one. 🙂

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [May 30, 2022, 7:09pm UTC](https://discourse.gohugo.io/t/how-to-add-different-class-to-inline-code-vs-code-blocks/38839/12 "2022-05-30T19:09:29Z")

</div>

When styling inline code, increase specificity. For example:

```auto
p > code {
  color: red;
}

```

Or:

```auto
dd > code,
dt > code,
li > code,
p > code {
  color: red;
}

```

Or:

```auto
:not(pre) > code {
  color: red;
}

```

[https://developer.mozilla.org/en-US/docs/Web/CSS/:not](https://developer.mozilla.org/en-US/docs/Web/CSS/:not)

---

<div class="post-metadata">

**Author:** ![SanJacobs](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sanjacobs/32/17008_2.png) [@SanJacobs](https://discourse.gohugo.io/u/SanJacobs)\
**Post date:** [May 30, 2022, 7:21pm UTC](https://discourse.gohugo.io/t/how-to-add-different-class-to-inline-code-vs-code-blocks/38839/13 "2022-05-30T19:21:00Z")

</div>

Thank you!  
I had no idea the `>` selector existed.

This solves my root problem! 😃

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [June 1, 2022, 7:21pm UTC](https://discourse.gohugo.io/t/how-to-add-different-class-to-inline-code-vs-code-blocks/38839/14 "2022-06-01T19:21:13Z")

</div>

Closed on June 1, 2022, 7:21pm UTC

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.