How do I style codeblocks and inline-code in Callouts only?

Custom CSS & Theme Design
,
1

Hello,

sorry if this is the wrong topic to post this to but has anyone here figured out, how to style codeblocks and inline-code in Callouts only while not styling any code outside of Callouts? I checked inspect element but they seem to have the same selectors as normal inline-code/codeblocks. I tried it myself but everything I have tried so far either didn’t change anything or changed all codeblocks even the ones outside of callouts. My knowledge of CSS is too little to actually figure this out myself, I believe.

Could anyone maybe tell me both?

  • How to style codeblocks and inline-code in Callouts only (live preview and reading view)?
  • How to style codeblocks and inline-code in Callouts for a customclass you add to the frontmatter ( the cssclasses in the properties section/YAML). For example: cssclasses: helper. Also for live preview and reading view.
2

You can target callouts in obsidian with .callout {} CSS class. However, you will need a basic unterstanding of selectors and combinators to achieve what you want. Then you can target everything within a callout.

1 Like
3

This is the right category!

What kind of styling are you looking to do? If you share that, folks will have a better idea of what direction to point you in, suggestions, etc.

4

Thanks, but “.callout {}” only targets the whole callout container. I was asking specifically about inline code and codeblocks inside callouts.

For anyone else looking for the same thing, these selectors worked:

.callout .callout-title-inner code {  /* inline code in the callout title */}

.callout .callout-content code {  /* inline code in the callout body */}

.callout .callout-content pre {  /* codeblock container */ }

.callout .callout-content pre code { /* code text inside the codeblock */ }

.callout .callout-content pre button.copy-code-button { /* copy button inside the codeblock */}

Or for a custom class I just did this and it worked:

.workspace-leaf-content:has(.helper) .callout-content code { }

.workspace-leaf-content:has(.helper) .callout-content pre { }

.workspace-leaf-content:has(.helper) .callout-content pre code { }
5

Yes and I pointed you towards CSS combinators which you have used in your examples to target specific elements within a callout.

6

I understand that combinators are the general concept involved, but the missing piece was Obsidian’s specific callout DOM structure. “.callout {}” only targets the whole container, while the useful selectors were “.callout-title-inner code”, “.callout-content code”, “.callout-content pre”, and “.callout-content pre code”.

That distinction was the actual issue, especially because inline code in the callout title for example is outside “.callout-content”.

7

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