Typora like custom CSS

[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>

[RainbowTrain]

Just FYI, from v0.12.0 Obsidian recommends to use em/rem instead of px and here is what I have changed on my CSS :

 /* font-size: 18px; */
  font-size: 1.7rem;

[apgold]

Really, really impressive @ChezFrancois! This comes very close to a WYSIWYG - thank you for putting this together.

A few items that would make this even more amazing (although I’m not sure if they’re possible) include:

• Handling pipe aliases (as noted above) - e.g. [[page^^block|alias]] should just show the alias text as the link
• Handling escape characters: e.g. typing \[some text\] should result in [some text] being displayed (ie. not displaying the escape character until cursor is active in the location or at least on the line)
• Related: typing “[some text]” (without the quotes) in Typora simply displays [some text] without any linking - which is what I’d expect since [some text] would not be considered a markdown link as it doesn’t have the trailing (url). However, in Obsidian your css removes the brackets and treats it as if it were a link.
• Embed links (e.g. Youtube embed code) works fine in Typora but not in Obsidian (in edit mode).

Lastly, I’m not sure if this is do-able with css, but it would be superb if there was a way to display web images in Edit mode: e.g. .

Thanks again for putting together this incredibly helpful code!

[TelsaMJ]

This is the best CSS I’ve ever seen, thank you for sharing!
However, I have encountered a small problem where the checkbox icon is not displayed correctly in edit mode. I am operating in a Chinese environment and I feel that it is a UTF-8 encoding problem, I wonder if there is any way to solve this problem?
Thanks a lot!

[Harrison]

Does anyone know of a aliases could also be made to render in Edit mode?

[hey]

I’ve created a feature request for improved parsing of internal links that would allow us to hide the clutter in pipe aliases as well. Please have a look and add a vote if you like.

I also hacked together a rough prototype of the feature as an obsidian plugin to show that it is possible:

However, to work perfectly, it has to be implemented by the developers.