I loved it!
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.
Remove this line padding-left: 8.5px !important;
2 Likes
It works. Many thanks!!
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
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
Is there a way to have ½ rendered as “½” (without the quotation marks, of course) in Edit mode via CSS?
I don’t think this is ideal solution which you want, but copying and pasting “½” from preview to editor is worked.
@jokysatria: thanks, but that is not what I am after, as you indicated. A lot is possible in rendering in Edit mode. For example, my blockquotes in Edit mode are almost identical to the Preview mode version. Or, a dash (-) that is rendered as a bullet point in Preview can also be rendered as a bullet point in Edit - I have that. There are more examples.
Of course, not everything is possible, like @Piotr pointed out above for a specific issue, but a lot IS possible.
I use ½ (or other number combinations) regularly, and rendering it in Edit mode would be another small step towards WYSIWYG.
@Klaas - It’s not exactly what you’re after, but I use Alt Codes often to do things like this. For example, pressing ALT+0189 gives the ½ character.
1 Like
@Erisred: thanks. On macOS one needs to do a bit more acrobatics to work with Unicode. There is the Character Viewer but that also involves a few clicks.
Easiest is just to type some characters and it gets rendered. Or text expansion. Thanks for jogging my memory.
I have no idea what’s the status of mathajx in the clutter-free, but if that’s working you could use $\frac{1}{2}$
This might be my new favorite snippet. I don’t use mathjax often, but here’s how it renders in a (mostly) OOTB environment:
@Piotr Awesome work. I tweaked your code a little bit–Biggest difference is changed the font in the - [ ] to be monospace so that it had the same spacing wether it was empty or had - [x] and reduced the line-spacing so that when going up and down between lines doesn’t make things jump too much. Makes for a much smoother experience imo!
(BTW love the new Cmd+enter hotkey for tasks)
span.cm-formatting-task { display: inline !important; font-family: "Andale Mono"; letter-spacing: -2.5px;}
/* span.cm-formatting-task.cm-property {color: lightgreen;} */
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-task.cm-meta,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-task.cm-property {
color: transparent;
position: relative;
}
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-task.cm-meta:after,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-task.cm-property:after {
content: "☐";
position: absolute;
top: 0px;
left: 3px;
color: var(--text-normal);
font-size: 28px;
}
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-task.cm-property:after {
content: "☑";
color: lightgreen !important;
}
5 Likes
Does anyone know how to prevent footnotes from disappearing in edit mode?
Clutter-free block ids:
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-blockid {
visibility: hidden;
}
.cm-blockid::first-letter
{
visibility: visible;
/* color: var(--text-normal); */
font-weight: 800;
}
(I’m a normie so I don’t know how to put this in gist or whatever but feel free)
6 Likes
that’s really cool thanks man!
Hey guys,
Thanks for putting this together, it’s great!
I’d like to know how to hide URL’s (external links)
while still keeping [[double bracket]] (internal links)
I know this is the part of the code that controls this, I’ve been trying to delete parts of it, but I can’t get it, I must be missing something.
/* inline formatting, link targets and [[ ]] disappears if not active line*/
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting,
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-string.cm-url,
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-link
{ display: none; }
Thanks for the help!
1 Like