Test Note: <span class="right-align">test **bold**</span>
Reading has “test” in bold with right alignment. Live Preview has "test **bold**" with right alignment. I would like both views to work appropriately.
Things I have tried
I tried inspecting the DOM and testing a few things such as .markdown-source-view or .markdown-source-view.mod-cm6, but I’ve had no luck.
I don’t understand why the DOM for source-view keeps “bold” in the , but Reading/preview-view correctly formats it.
Can anyone provide a solution here as well as any suggestions on better understanding how CSS works with Live Preview? From other posts, it seems that depending on what is being edited, the Class chosen in CSS will need to change.
The issue here isn’t the CSS or selector being used. The Markdown formatting isn’t going to render if it’s in HTML tags (in Live Preview mode).
If you search the forum you’ll find many examples. Here’s one.
I personally try to keep as much HTML out of my notes as I can, but sometimes it’s called for. You could try separating out the CSS for regular weight and bold, but the <span> tags aren’t going to display on the same line next to each other, so that’s probably not what you want.
I think it’s only a Live Preview limitation, but as markdown inside HTML tags isn’t officially supported (as far as I know), I don’t think it would be considered a bug if you do come across a situation where is doesn’t work.
Think of it this way: you’re using a Markdown editor to avoid having all that HTML mixed in with your text. Like I mentioned above, there are times that call for it, but I’d use it sparingly. Some folks are the opposite though and have span classes everywhere coloring different sections for emphasis, specialized notes, etc.