I searched through the help docs and on this forum, and while I found css snippets for hiding the “#” characters for headers, I couldn’t find any for hiding custom characters. I’ve looked online to try to cobble the css together myself, but I’m a complete beginner and it’s very confusing.
What I’m trying to do
I use Obsidian mobile to create markdown flashcards for export to Mochi (a spaced repetition mobile app). I’ll like to be able to read these notes outside of Mochi, but the cloze deletion characters (“{{}}”) that show up in read mode can be very distracting.
I googled a bit, and found that CSS can not hide custom characters by itself, it can only operate on some element. It can add content to elements, but it can’t target characters/text within elements.
With regards to css which hides #, and the possibility to hide {{}} I made a little example, and viewed the DOM elements related to this text. See image below:
This might not be very easy to understand, but I’ve highlighted a row in the DOM elements in the right part of the image, and it highlights the corresponding text in the left part. The row I’ve selected corresponds to the element containing the ## part. When markdown parses this text, the header characters translates into its own element.
On the next line (in the right part), you can see the rest of the header (including an extra {{}}text), indicating that’s an element by itself.
Finally below that you can see that the entire line Any difference, here {{}}, or not... is an element on its own. In particular, the {{}} part is just included within the other text. Thusly any CSS styling will apply to the entire line.
tl;dr My conclusion is therefore that the header characters can be styled/hidden since it’s an element on its own, but the {{}} is just a part of the text and can not be styled/hidden (separate from the rest of the text).
