[Syntax Highlight] Unexpected syntax colouring inside HTML attribute quotes
Opened this issue · 3 comments
Describe the bug
When using an antler tag contains a string (in example using a ternary operator) within an HTML attribute value, it displays error type syntax highlighting.
It appears the same with all extensions disabled, so I thought it would make sense to fix it within this plugin?
Impacted Products
Which Antlers Toolbox products does this bug apply to?
- Antlers Toolbox for VS Code
- Formatter CLI
- Antlers Prettier Plugin
- Antlers Syntax Highlighting (external systems - not VS Code)
Versions and Other Plugins/Extensions
vscode v1.91.0
To Reproduce
This HTML shows the problem:
Expected behavior
- within
{ is_current ? 'aria-current="page"' : '' }}I would expect'aria-current="page"'and''to not be highlighted differently to other values, it appears to me red like an error but is valid syntax. The antlers code works as expected in the application.
If submitting a formatting bug, please include the template contents below as well as an attachment
<nav aria-label="Main Navigation" role="navigation">
<ul>
{{ nav:main }}
<li class="{{ is_current || is_parent ? 'active' : '' }}">
<a href="{{ url }}" class="tx-lg font-bold mr-1" {{ is_current ? 'aria-current="page"' : '' }}>{{ title }}</a>
{{ /nav:main}}
</li>
</ul>
</nav>(wont allow me to attach an html file for some reason)
Additional context
Thank you for making this extension 👍
Another example which I suspect is related
{{ elseif type == "youtube_embed" }}
<div class="youtube-video-container">
<iframe
width="560"
height="315"
src="{{ url | replace('watch?v=','/embed/') }}"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
>
</iframe>
</div>Another related example that causes a CSS parsing error in vscode:
{{hero_carousel}}
{{if type == "hero_panel"}}
<li style="background-image: url('{{ glide :src="background_image" w="1920" format="webp" }}');" class="{{index == 0 ? 'active': ''}}" id="{{ name | slugify }}-panel">
<h1>{{ headline }}</h1>
<h2>{{ sub_headline }}</h2>
<a href="javascript:void(0);" style="background:#fff; padding:8px; color:var(--brand); text-shadow:none;">{{ link_text }}</a>
</li>
{{/if}}
{{/hero_carousel}}When I remove this line, the problem disappears:
<li style="background-image: url('{{ glide :src="background_image" w="1920" format="webp" }}');" class="{{index == 0 ? 'active': ''}}" id="{{ name | slugify }}-panel">
This works the same way with all extensions disabled.
I hope this is a helpful bug report. Thanks for putting this out there once again, I certainly appreciate the challenges you have overcome with this tricky syntax.