Typora like custom CSS

[Archie]

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

[Fastidious]

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

[afokapu]

What about images and videos?
How are they handled ?

[Klaas]

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

[axcraig]

This is awesome! Thanks

[bepolymathe]

How you make installation ?

[axcraig]

As above:

@ChezFrancois

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)

[bepolymathe]

Thanks

[dixonge]

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

Thank you!

[ChezFrancois]

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

[Klaas]

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

[Harrison]

This is great, thank you

[dcanosa]

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!

[dcanosa]

@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;
}`

[Hermann]

@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)?

[ChezFrancois]

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.

[ChezFrancois]

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.

[VanderG]

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.

[ChezFrancois]

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

[joeweb]

Thanks for code! This is really great.
Do you have any idea how I can implement something like the code below to optimize the presentation mode in Obsidian?
I would like left-align all text in the slides, except the titles.

I’m a full newbie at CSS, so happy for every help!

style type="text/css">
  .reveal p {
text-align: left;
  }
  .reveal ul {
display: block;
  }
  .reveal ol {
display: block;
  }
</style>