You’re right Fastidious, I have been rather short in explanations.
Here below you will find the before/after screenshots, and a short “How to”

Before (native Obsidian editor User Interface):

After (editor UI using the CSS Snippet, see How to below):

The active line changes back to standard Markdown automatically:
Capture d’écran 2021-02-11 à 21.07.55

Capture d’écran 2021-02-11 à 21.08.01

Capture d’écran 2021-02-11 à 21.08.09

Short How To

In Obsidian parameters

  • go to the “Appearance” part
  • at the end of the parameters, there is the “CSS snippets” part
  • you can access the folder where those CSS files are stored by clicking on the folder icon next to the title “CSS snippets”.
  • create a CSS file in this folder, copy paste the exact content of the CSS code shared in my initial post, in this file
  • save it
  • go back to the parameters, update (click on the icon with the two arrow circling to one another)
  • you will see the name of the file you just created appearing
  • activate it
  • that is it. Your editor UI will behave nearly like Typora (not as clean, but it made the full switch possible for me)

Note: the difference with Typora is much bigger for tables. This CSS snippet makes them easier to read, but not much simpler to edit. Here is a screenshot of a table in edition mode, when this snippet of CSS code is activated:

Note: you can change the color of the checkboxes, links or the horizontal line which is displayed instead of just “—” in standard editor UI.
Hope that answers your question.

8 Likes

That’s wonderful. I hope devs make this available on core Obsidian soon, but for now this would do the job. I must try this specially on tables since you said that part is not perfect tho

1 Like

Very well done! Thank you for the screenshots, and descriptions. Using it right now. :slight_smile:

1 Like

What about images and videos?
How are they handled ?

@afokapu: the Edit mode does NOT render them as videos and images, they remain as links. Only in Preview will they be rendered.

This is awesome! Thanks

How you make installation ?

As above:

2 Likes

Thanks :wink:

I like it. Not 100% Typora, but probably close enough to get me by until it gets baked in.

Thank you!

2 Likes

You’re welcome.
Happy to share some code to make our lives easier.

@ChezFrancois: the code for Checkboxes instead of brackets in edit mode does not work.

This is great, thank you

wow this CSS is amazing!! Congrats on the development.

I have one questions… Is it possible somehow to convert the “-” into real bulletpoints? I haven’t found anything in the code related to that.

Thanks!

@Klaas gave me the solution on Discord.

`/* Unordered lists: turn into bullets as you type, as per Typora */
span.cm-formatting-list-ul {
visibility: hidden !important;
}

span.cm-formatting-list-ul:after {
content: '• ';
margin-left: -12px;
color: var(–accent);
visibility: visible !important;
}`

@ChezFrancois a realy nice work, Thank you very much.
Is it possible to get this view of the “Typora like CSS” also for the preview (especially for the preview-mode)?

Great job.
I found the “-” lighter for the eyes than the “•”, so I left it like that.
You’re answer is a great complement.
So users can choose chat they prefer.

Thanks for your feedback.
I must confess I didn’t explore much the use of CSS for the preview mode I hardly use for now.

Much impressed! Thanks a lot. The one thing that bugs me a tiny little bit is that links with a different display text (after a | pipe) display both the actual link and the display text.

1 Like

Thanks for the feedback. I will look into that and keep you posted.

3 Likes