A Typora-like editing mode (edit and preview at the same time)

Hey would you mind explaining to me how to use that snippet?

@tinoargentino: open a new plain text file, copy/paste the code in it, save as an obsidian.css file in your Obsidian vault.

If you already have an obsidian.css file in your vault, just copy/paste the code to it.

1 Like

I fully agree. I don’t really care too much about the appearance of the edit mode, but being able to edit (or even just view) embedded notes in edit mode would honestly be a game changer. (I do use the CSS tweaks, but wouldn’t die without them. I see them as nice but not necessary.)

4 Likes

Editing embedded notes — that is indeed a valuable thing! Especially when you are building a “trail” from notes.

3 Likes

+1 for distraction-free writing and alternative to Typora.

3 Likes

A post was merged into an existing topic: WYSIWYG Open-Source Markdown Editor

A post was merged into an existing topic: Another WYSIWYG Open-Source Markdown Editor (An alternative to Typora)

thank you! it workssssss :grinning:

What about this hack until it is implemented natively?

https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/58?u=pihentagy

1 Like

@pihentagy: and what about this?

I think it is too hard / impossible to implement. Hope others prove me wrong :wink:

All of those can be hidden when !important is added to original css, unless I don’t understand what you expect

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,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-tag {
    display: none !important;
}
2 Likes

@Piotr: wow, this is really cool, it works, even the
tags are hidden. Many thanks.

The only thing is that I had set a colour for the H1 - H6 headings, but with this code they are back to black, even in Preview. Is there a way to exclude the heading font colours?

Headers have cm-header class, which is not affected by the code above (it also doesn’t revert colours in my Obsidian), I think that you might have accidentally remove or change some part of your stylesheet.
Or if there is some error in the css, everything below that error will not be used, you can look for some unnecessary or lacking ,, ;, {, } in the code surrounding your last change.

BTW if you want to use my modification and still see -, tasks etc, you’ll also need to change the rest of the original code into this:

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

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

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

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.

2 Likes

thank you :zap::sunflower:

I’m used to the Typhora style but honestly I would welcome either one of the editor modes described by @dsteinbock

Edit:
Thanks to @Klaas!

2 Likes

It’s great to know that the feature is on the road map, but I wish it were given a higher priority. Especially if you regularly include images in your notes, Obsidian currently feels pretty clumsy compared to Typora. On a small laptop screen, dual pane mode is not really feasible, and regularly switching between edit mode and preview mode feels pretty awkward.

It looks like this sentiment is shared by a large number of users: Not only is the Typora-like editable preview mode the most requested feature, it also leads by a wide margin (it has twice as many likes and twice as many replies as the second most requested feature).

3 Likes

Why not just do your writing in Typora then? Simple enough to have one file open in Obsidian and Typora and only switch to Obsidian for autolinks, image pasting etc.

1 Like

@Dor: Because more often than not, I don’t sit down with a particular note to do prolonged writing; instead I cycle between different notes (sometimes somewhat rapidly), alternating between reading and making small edits. This makes having to frequently toggle between edit and preview mode (especially to see the images) already a bit awkward; introducing frequently switching to Typora would add even more friction.

Furthermore, for many people (myself included), visual consistency is extremely valuable. In Typora, my notes always look the same, which is very conducive to forming consistent visuospatial representations of the notes. By contrast, switching between edit and preview mode in Obsidian, and/or putting Typora on top of all that, is very disruptive in this regard.

As a consequence, I currently still spend most of my time in Typora, even though there are a lot of things I really like about Obsidian. If Obsidian had a Typora-like editable preview mode, I would jump ship in a heartbeat.

4 Likes