Is there a way to wrap sections of content in a css class without breaking their rendering across modes?

What I want to do:
Add a class around wide blankets of content, and retain the rendering on the inside

Why?
I want to use Obsidian to publish up basic D&D campaign notes, but hide some of the contents from my players so that I can use it both for worldbuilding and notes exposure as they discover things.

What’s the issue:
All the plugins I’ve tried that wrap content in a wrapper and add a class break the rendering of contents on the inside, like callouts or tables.

I’ve tried Highlightr and a few others that apply styles to different highlighted bits, but nothing I’m seeing is retaining all the inner rendering and just ‘surrounding’ it in something with a class.

Any plugins that do this perfectly with a defineable class?

In most (all?) cases, rendering of markdown, links, etc., inside of HTML aren’t going to work.

Maybe Obsidian flavored comments could work?

https://help.obsidian.md/Editing+and+formatting/Basic+formatting+syntax#Comments

Thanks for the idea! Unfortunately I’m really looking for the visible content to be the ‘chosen’ content, instead of the opposite. Main use case would be the worldbuilding database, with small chunks marked for visibility. Its frustrating because I’m super close (with the Digital Garden plugin) to getting this concept close to perfect, but it breaks down longterm if I can’t ‘present’ any of the fancy content or see things live.

There are a lot of words there but not so many examples.

If you share a few exact examples of what you are going for, maybe someone can point you in the right direction. Good luck!

Sure! Say I have the following md text:

# Header 1
Test Text
Bold Test Text
## Header 2
>[!NOTE] Note title
>This is a warning
More Test Text
| Table Column 1 | Table Column 2 |
| -------------- | -------------- |
| Content 1      | Content 2      |

And I want to wrap everything from ## Header 2 to the table in something that gives the whole section a CSS class. Importantly though, I need everything inside the wrapping to retain md formatting across modes.

Might end up looking something like:

# Header 1
Test Text
Bold Test Text
<span class="testclass">
## Header 2
>[!NOTE] Note title
>This is a warning
More Test Text
| Table Column 1 | Table Column 2 |
| -------------- | -------------- |
| Content 1      | Content 2      |
</span>

There are many plugins like Highlightr that work great for a single line (by wrapping them in a <mark> html), and others that successfully wrap sections of lines/blocks in <span>s or <div>s, but all of the multi-line/block wraps I’ve found break the md formatting of the content on the inside of the wrap.

Got it. Thanks. It makes it a bit easier with a concrete example. As mentioned in the above link

Obsidian does not support using Markdown formatting or blank lines inside of HTML tags.


You could use a custom callout to “tag” an entire section. Markdown formatting, links, etc., will work inside that. You can even try adding headings, but headings inside callouts won’t be indexed as headings or show up in the Outline tab. They will change size and pick up any styling you’ve set though. e.g.

# Header 1
Test Text
Bold Test Text
> [!custom-1] name name
> This is a warning
> More Test Text
> [[link]] **bold** _italics_
> 
> 
> | Table Column 1 | Table Column 2 |
> | -------------- | -------------- |
> | Content 1      | Content 2      |

and the css:

.callout[data-callout="custom-1"] {
    margin: unset;
    border: unset;
    border-radius: unset;
    padding: unset;
    background: unset;
    mix-blend-mode: normal;

    & > .callout-title { display: none; }
}

and changing the CSS a bit to see what is in the callout area:

.callout[data-callout="custom-2"] {
    margin: unset;
    border: 2px solid salmon;
    border-radius: 8px;
    padding: 0 10px;
    background: unset;
    mix-blend-mode: normal;

    & > .callout-title { display: none; }
}

Maybe you can make the above work in what you are looking to do.

1 Like

After messing around with this a little bit, it’ll work great I think! Thank you so much for the idea, Ariehen.<3

One more question for my sanity, know a simple way / keyboard shotcut to add a > to the beginning of a bunch of lines? I’d love to hijack the tab button.

1 Like

Great! :smiley: yeah, callouts are fun. The defaults, how different themes style them, and on to more complex ones: e.g. https://publish.obsidian.md/slrvb-docs/ITS+Theme/Callout+Adjustments and https://efemkay.github.io/obsidian-modular-css-layout/multi-column/. Good stuff.


As for the formatting, I’m a fan of the Insert callout command. Get everything how you want it → select text → run Insert callout command and everything is (mostly) wrapped up nicely in the callout → change the callout name. You can even wrap multiple callouts using the command. (There’s also the Insert blockquote command for only the >s)

CleanShot 2024-10-29 at 17.23.32

1 Like

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