#37

I think it is worth to make a gist from this css, so here is it:

You can create a PR to contribute.

2 Likes
#39

this is cool. i tweaked it a bit for my needs. better to use :before for the bullet.

/* Turn -lists into bullets as you type*/
span.cm-formatting-list-ul {
visibility: hidden !important;
}

span.cm-formatting-list-ul:before {
content: “•”;
font-size: 1.2rem;
visibility: visible !important;
margin-right: -.6rem;
margin-left: 1rem;
}

#40

Yours is probably more correct. I am a complete amateur and just save refreshed to make it work! Thank you!

#41

@misterchad: sorry, I don’t agree. Putting :before does not make the bullet visible. Putting :after like @ishgunacar did does make it visible.

Furthermore, the code that you modified and added makes the cursor bigger and places it to the left of the bullet, although when you start typing text afterwards it does jump to the right place. I prefer @ishgunacar’s code.

#42

@ishgunacar: thanks for sharing.

1 Like
#43

Clutter-free edit mode is a step towards a pseudo-WYSIWYG experience by making modifications to the Edit mode. I personally love WYSIWYG, and have implemented many of the code here.

I thought it might be useful to compile it all into 1 CSS sheet. Note that the CSS sheet is NOT a theme; you can copy/paste from the sheet into the theme you are using.
Enjoy.

WYSIWYG.css (5.6 KB)

12 Likes
A Typora-like editing mode (edit and preview at the same time)
#44

is there any way to make the preview fonts thinner, like in the editor?

#45

@Kuncy: I am not a CSS expert at all. I do remember that someone asked the same question and Piotr answered it, I think. You’ll have to search on the forum.

#46

@Kuncy, @Klaas
Was me.

Reply from Piotr
Font is thinner in editor mode than in preview mode. How do I change that?

1 Like
#47

I am really happy with the developments made in getting an almost perfect WYSIWYG experience via custom CSS alone. It has been more of a joy to write in edit mode now than it ever has, I actually found myself opening preview mode less.

Perhaps my (hopefully unreasonable) concern with too close of a perfect experience would prevent us from getting excited when the devs actually implement the real deal. I’m almost 100% happy with my new edit mode, yet I wonder what cool features would the devs add to their version of WYSIWYG that isn’t already accomplishable with custom CSS (aside from other obvious features such as transclusions). Of course, I’m aware that CSS can only go so far, and maybe that is for the best, but I’m just concerned that the actual WYSIWYG would provide us a dopamine rush that is way milder than if we haven’t been toying with clutter free edit mode :wink: Just my thoughts. Hopefully yall—and especially the devs—would prove me wrong.

Btw, not saying that we should stop developing clutter free edit mode either :wink:

1 Like
#48

@3mbry0: whilst we have come a long way towards imitating WYSIWYG, it is not the real thing by a considerable margin.

When a lot of that clutter is hidden it can be hassle to edit it. In real WYSIWYG that is mostly a smooth, seamless experience. And if you hit a bump you can revert to the raw markdown source to edit it. If you have ever used Typora you’ll know what I mean.

So, I am definitely looking forward to the real thing, and hope Licat can stick to his unofficial promise to have it out by the end of this year latest.

2 Likes
#49

Is there a way to have 1<sup>st</sup> rendered as “1st” (without the quotation marks, of course) in Edit mode via CSS? Looking at you @Piotr :laughing:

#50

Nope, for codemirror st is like any other text, you can’t apply any special style to it

#51

I loved it!

#52

@Piotr: OK, thanks.

#53

Thanks, Piotr, that’s so cool!

I find a bug with your quote code. That is, simultaneous use of “>” and “no.” can cause cursor positioning error and display problems, as shown below. Unfortunately, I don’t know how to fix it😓. It would be great if you could fix the bug. Thank you.

#54

Remove this line padding-left: 8.5px !important;

2 Likes
#55

It works. Many thanks!!

#56

I assume this hasn’t been posted here yet, but this was @Piotr’s code for making text in editor mode thicker to make the font look more like in preview mode (posted in this thread: Font is thinner in editor mode than in preview mode. How do I change that?)

.cm-s-obsidian .CodeMirror-line * {
    -webkit-font-smoothing: auto;
}

It’s tiny, but it was really one of the game changers for me lol, and lead me to find other clutter-free CSS hacks. All credit goes to @Piotr (unless this hack is way too simple to be “owned” by someone).

The code for the reverse (make preview text thinner) is also found in the same linked thread (as mentioned here before).

2 Likes
#57

@3mbry0

I felt the same. I had some WYSIWYG hacks, but I was not quite happy, till this one. Another important one for me is the blockquote rendering as in Preview mode.

2 Likes