SilentVoid13/Templater

Templater breaks Live Preview mode if there is a Templater script inside of an HTML element

SublimePeace opened this issue · 3 comments

SublimePeace commented

Plugin information:

  • OS: Windows 10
  • Templater version: 2.8.0
  • Obsidian version: 1.6.7

Describe the bug
If the user is in "Live Preview" mode, and an HTML element contains a templater script, then the entire document after that script will be displayed as if the user is in Source mode. Please see the two contrasting screenshots which showcases this perfectly. Both screenshots were taken in Live Preview mode.

Before pasting a templater script inside the HTML:

bBR4xKOsKu

After not changing anything, except pasting the templater script:

J0qA8boamm

Expected behavior
Markdown formatting should be displayed correctly when the user is in Obsidian's Live Preview mode, even if there is a templater script inside of an HTML element in the note.

Note that disabling/enabling "Syntax highlighting on desktop" doesn't change anything as far as this issue is concerned.

I discovered this bug while making my Daily Note template, where I tried to use HTML to center an element. However, due to this bug I was forced to instead use convoluted CSS to do it, because not being able to use Live Preview to preview what my daily note will look like is too big of a drawback.

Steps to replicate:

  1. Open up a note in Live Preview, and paste the following into any part of the note's body: <a><% %><>
  2. Observe that the entire note after the code will be displayed as if Source mode is turned on, even though you're in Live Preview.
SublimePeace commented

After some testing: <><% %><> will not cause this bug.

Nor will putting numbers inside the HTML tags: <1><% %><>.

However, as soon as either HTML tag has a letter in it, the bug appears: <w><% %><> or <><% %><ggfsdgfdsgfd>

Zachatoo commented

I don't expect we'll be able to fix this anytime soon. I would recommend this as a workaround for now. Instead of this:

<center style=""><% tp.date.now() %></center>

Do one of these

<% `<center style="">` %><% tp.date.now() %><%`</center>`%>
<% `<center style="">${tp.date.now()}</center>`%>
  • 👍1
SublimePeace commented

I don't expect we'll be able to fix this anytime soon. I would recommend this as a workaround for now. Instead of this:

<center style=""><% tp.date.now() %></center>

Do one of these

<% `<center style="">` %><% tp.date.now() %><%`</center>`%>
<% `<center style="">${tp.date.now()}</center>`%>

Thank you, that works!

PS: Appreciate you and all the work you do to maintain this plugin. I also use your CSS editor plugin daily, so another thank you for that ❤

  • ❤️1