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

support
1

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

code blocks like this

to receive class="code-block".

How would I do this?

1 Like
2

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

3

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

4

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

5

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. :sweat_smile: It is those code tags that I would like to receive the classes.

6

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.

7

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.

8

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.

9

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

these types of code blocks

using classes.

10

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 :slight_smile: 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!

11

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. :slight_smile:

1 Like
12

When styling inline code, increase specificity. For example:

p > code {
  color: red;
}

Or:

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

Or:

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

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

3 Likes
13

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

This solves my root problem! :smiley:

14

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