How to apply CSS styling only to the text that has/starts with particular symbols (e.g. emojis)

What I’m trying to do

I am trying to add CSS styles only to paragraphs that start with an emoji (e.g. :exclamation:or :grinning:). Specifically, I want indent all such paragraphs to visually distinguish them from other text blocks + add some styling (e.g. add italics)

Things I have tried

I have found a plugin called List Callouts that can color list items if a configurable character is added at the start of a list. But this plugin can be used only inside lists and only for the sake of adding color.

Why don’t you use callout?

Are you working in either or both of live preview and reading mode ?

Mostly in the live preview mode, occasionallly - in the reading mode. Does it make any difference? Still, I would be glad to find any working solution

I think you can’t do this with emojis, at least with pure css, because css doesn’t recognize symbols in your text. You can use tags instead, and then add styles to the lines containing specific tags.

But probably callouts is a simpler solution.

2 Likes

I also encountered the same problem, and it is still unsolved. Is there any other better way?

Well, using this text as an example:

This is the important first line of multiple lines in one paragraph. #§important 
Where this is the second line of that paragraph.

This is the not so important first of multiple lines in one paragraph. 
Where this is the second line of that paragraph.

And the following styling:

.is-live-preview .cm-line:not(.cm-active) .cm-tag-important,
[href="#§important"] {
    display: none; /* Hides the tag from the table view */
}

p:has([href="#§important"]),
.is-live-preview .cm-line:not(.cm-active):has(.cm-tag-important) {
  font-style: italic;
  padding-left: 5em;
}

We get this output in live preview:

And this output in reading mode:

In live preview the rendered output is still split into lines, and there is loads and loads of extra tags to facilitate the editing, which are not there in reading mode. And I’m not sure if it’s possible to address the entire paragraph using text like in my example above. If your entire paragraph is kept on the one line (allowing Obsidian to soft-wrap the line) the output is somewhat similar in both cases.


Regarding other options on how to do this, I would strongly consider either using callouts as suggested in another post, or using decorated tasks as offered in multiple themes/plugins. Here is an example using decorated tasks with the minimal theme:

- [!] This is my important text, and it can be as long as you like...

Which displays in live preview (in a very narrow window) displays as:
image

I think this is a better option, as it is a somewhat logical markup, and even in source mode it stands out a little without needing too much special styling. If you want to, you can also add your own status characters which could produce different icons. And these decorated tasks can even be queried using rather simple queries to collated all your important notes and so on.

1 Like

Thank you very much for such a detailed reply! Decorated tasks seem to be the closest option, so I’ll stick with that one.

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