Clutter free edit mode

Share & showcase
1

Update! Here is the gist, I hope this way contribution will be easier:

Clutter free edit mode (based on Markdown Concealed Vim Syntax)

Worked with 0.8.0

It removes all markdown clutter not on current line.

:warning: Beware of the following annoyance, which affects selection. If you know a solution to that problem, please let us know!
See also CSS 'Active Line' Fails When Highlighting Text

Before: image

After: image

Old details for reference

Updates

  • code block delimiters are visible
  • task checkboxes visible (and has monospace font)
  • internal link brackets hidden
  • html comments, html tags and footnotes removed based on A WYSIWYM (Typora-like) editing mode

Code

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

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


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

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

Very cool. Just did a quick look and found that the following didn’t have the markdown hidden:

- [[Philosophical theory of pragmatism]]

3

That is cool. That seems like a step half-way to WYSIWYG !

  • the code snippet that keeps list markers shows checkboxes as
    - instead of as - [ ]
  • is there a way to keep the header hashes visible too?
4

To fix this replace:
span.cm-formatting-list {

with

span.cm-formatting-list, span.cm-header, span.cm-formatting-task {

1 Like
5

Thank you. But that way the rest of the clutter is also left visible, not just the check boxes and header hashes.

6

Updated my original post based on feedbacks.

3 Likes
7

Thank you, it works.

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