Typora like custom CSS

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

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>
1 Like

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;
1 Like

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. ![](image_url).

Thanks again for putting together this incredibly helpful code!

2 Likes

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!

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

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.

2 Likes