Clutter free edit mode

Share & showcase
8

Feedback:
html tags are still visible

9

Like <details>?

10

Yes also
<u>underline</u>
<del>strikethrough</del>

if we are having “more” html tags in v0.8.1 …

(edit: sorry forgot to escape)

11

Amazing !!
A small issue - The line doesn’t stay in edit view when text is being selected. it switches to Focus mode. This is confusing.
image

2 Likes
12

To turn them off add this line to css (but why not use “regular” markdown syntax btw?

div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag { display: none; }
1 Like
13

Good it is real clean now, thanks @pihentagy !

It was for the use of <details><summary> tags in collapsible outlines hack in v0.8.1 Preview mode (related post: Folding in preview - #39 by _ph). I am anticipating support of more html tags in the coming newer versions of Obsidian.

something like this Hello, I am visible now
14

Thanks for that.

In reply to your question as to why not use “regular” markdown syntax, I can add that markdown does not support everything I use, such as font colour and font size, among others.

15

Using html tags inside markdown is something expected. However because it is cumbersome to type (saying that even as a programmer) I don’t type myself much html tags, but when I do, I’d like to see that. But that’s my personal preverence…

Same as above, if I’d need too much fancy formatting, I’d use some other programs.

Btw have you read this article? http://www.visualmess.com/

1 Like
16

Clarity and ease. Learnt.

17

I have not read the article in your link yet, but certainly will. Many thanks.

Nevertheless, after I added your last code snippet to hide the HTML tags and seeing the result, I immediately deleted it again. My cursor reacts differently, and I do like to see those HTML tags.

18

Update to my earlier comment.

I have now read the article, and the message is clear - I do agree with it.

However, ironically, of the 2 Aikido flyers he keeps referring to, I find the one on the left, the one that is supposedly more “messy”, less clean, much easier to read and extract the relevant info from.

Just sayin’

1 Like
19

Did anyone else get this bug where if you make a [[ ]] link in a bullet point, it doesn’t hide square brackets properly?
Cursor on the line:
image
After clicking away:
image
It works properly without a bullet point
image

It started occurring in v0.8.1

Checked in normal preview mode and it renders fine, so it just persists with this code

1 Like
20

Any idea how to make the clutter-free editor from @pihentagy compatible with the tag pills in editor from @rsdimitrov/@uzerper? Right now the tags look like this:
image

21

Right now this code displays [[apples]] as apples and [[apples|apple]] as apples|apple.
Any idea on how to make [apples|apple]] appear as as apple ?

1 Like
22

@pihentagy: I like this bit of code because, using the same font in Edit as in Preview, one gets a sense of WYSIWYG.

I have found, however, that an inline footnote is not hidden.
So, in this: some text^[some footnote text], the bit between the square brackets does not get hidden by the code when the sentence is not in focus.

Also, this <!--some text--> does not get hidden.

And I would like to see <br> hidden too. I tried
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-link but it does not work.

Is there any way to get these things hidden too, or is that impossible with CSS code?

23

So grateful your CSS, but I also have a demand that remove the clutter in nested syntax, for example in the footnote, I want to turn ^[[Obsidian] (https://obsidian.md/)] into ^[Obsidian] or Obsidian， it’s can be achieved? Thinks!! :smiley:

24

Thanks for your reply, but it seems to don’t work, I put your line to the following position, there is any wrong?

/* 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,
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hmd-barelink
{ display: none; }

/* hide all html tags – IT IS COMMENTED OUT BY DEFAULT  <em>/
/</em>  div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag{ display: none; } */

/* except list markers */ span.cm-formatting-list,
/*code block backticks  <em>/ span.cm-formatting-code-block.cm-hmd-codeblock,
/</em>  optionally header hashes */ span.cm-formatting-header
{ display: inline !important; }

/* and task checkboxes */
span.cm-formatting-task { display: inline !important; font-family: monospace; }
25

no matter at all， thanks !！

26

Horizontal line in edit mode. Changes --- to full-width line.

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hr {
    color: transparent;
}

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hr:after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    background: var(--text-selection);
    left: 0;
    top: 50%;
}

Quote (> lorem ipsum ...) in edit mode with left border rendered instead of >

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-quote {
    color: transparent;
}

div:not(.CodeMirror-activeline)>.HyperMD-quote {
    border-left: 5px solid var(--text-selection);
    padding-left: 8.5px !important;
    margin-left: 5px;
}
5 Likes
27

These are really cool! Thank you so much!

Edit: just find a bug in Quote if use bold or italic. :sweat_smile:
image

Anyway, thank you :pray: