Typora like custom CSS

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