Show whitespace in reading mode code css file

please send me this file. I really need this. I don’t know much about CSS. Please help me.

GitHub - joethei/obsidian-control-characters: Show control/non-printing characters in edit mode

I guess my question is not clear, my friend. I don’t want to notice the white spaces. They just shouldn’t get lost in read mode. For example, it disappears when printing. It has to be visible.

What you want is to (for example) type multiple spaces in a row and have them appear in Reading View as multiple spaces instead of a single space — is that right?

Yes sir

is there any solution?

Markdown is a markup language which is setup to mainly ignore (or squash) whitespace. It will not be easy to preserve the whitespace you add into your markdown, unless you write your entire notes within code blocks, which I reckon you don’t want to do as you then will loose out on most (if not all) other markdown syntax.

As holroy says, not really. But there may be another way to do whatever you are using multiple spaces for. What are you using them for?

I write chords for songs. I have to leave a lot of spaces to align the words.

If you do a search for chords in the Settings > Community plugins > Browse three alternatives comes up, maybe one of them is of use to you:

The last one is something else, and the second one seems to be for displaying the actual chords, but the first one in that list seems to be for display lyrics and chords, so maybe that’s a good option (if it still works, as it is a little dated).

That first one does use the code block thingy I referred to earlier to preserve whitespace characters.

1 Like

I installed this in a test vault of mine, inserted the example text, changed the instrument to “guitar”, and added the following CSS snippet:

div.block-language-tab > div:has(img) {
  display: none;
}

And then it after pressing the D which displays the chord for guitar it displays as this:

Could be rather useful, I reckon, and it does seem to do the job.

I would mark those chord sections as code, as holroy suggested (I’m guessing those parts don’t use any other Markdown).

I don’t think there is a solution yet, without using a code block, so that the spaces between the texts in a normal markdown file are not lost. But there are helpful css, you suggested them, thank you.

I think by far that the plugin suggested would produce the nicer solution and visual appearance.

However, there is another possibility which could work for display purposes, and that is to use inline markup for the chords at the point where you need to play the chords. This would allow for whitespace characters to be removed, but have the chords placed correctly above words.

Imagine something like the following:

[G]Blackbird [Am]singing in the [G/B] dead ...

With the visuals placing the chords above the lyrics. Not sure how to write the CSS, but if other markup is needed, but I do know it’s doable.

I also know that preserving the whitespace within normal text is almost for certain not possible, outside of the code blocks.

In other words, I strongly believe your options is either to use code blocks (like with the plugin above) which uses monospaced text, or to use inline chords with some CSS to place them above the lyrics.

You could also use the <pre> HTML tag which preserves whitespace. (I didn’t suggest it earlier because marking as code , which produces <pre><code> when converted to HTML, is easier, and you could broadly consider musical notation to be code.) Again, Markdown won’t work inside it.