(Support regex in strings) - Broken syntax highlighting when quoted string starts with /

[MeesterPaul]

Summary

Syntax highlighting is broken when the template contains a quoted string starting with / such as "/_skeleton.html" or '/_skeleton.html' - the highlight no longer recognises the end of the string.

Expected Behaviour

Correct highlighting regardless of contents of quoted string

Actual Behaviour

Syntax highlighting is broken when the template contains a quoted string starting with / such as "/_skeleton.html" or '/_skeleton.html' - the highlight no longer recognises the end of the string.

How to Reproduce

1. Include any quoted string where the first character is / such as "/_skeleton.html" or '/_skeleton.html'

Problematic Twig template.

{% extends "/_skeleton.html" %}

{% set pageTitle = "Archiv" %}
{% set articleCount = 10 %}
{% set showIntro = true %}

Or

{% extends '/_skeleton.html' %}

{% set pageTitle = "Archiv" %}
{% set articleCount = 10 %}
{% set showIntro = true %}

Environment

• Sublime Text build: version 3.2.2 build 3211
• BetterTwig version: v1.0.3
• Twig version: v2.13.1
• Operating System: Windows 10

[UltraInstinct05]

Thanks for reporting the issue. The issue is with a start of /, the syntax highlighter thinks that the following text is going to be a regular expression until it meets a corresponding ending /. I am not sure without complex heuristics, it is reliable to see if / indicates the start of a regex or a path to a template.

In the meantime, does this work {% extends "./_skeleton.html" %} ? This should prevent the highlighting from breaking.

[MeesterPaul]

{% extends "./_skeleton.html" %} works as a workaround for templates on the platform I'm using (Craft Pro 3.5.11.1) but it's not an approach that can be used generally, e.g. here is a case from a separate template where the path to a CSS file is built using a variable:

{% do view.registerCssFile("/" ~ activeTheme ~ "/styles/tobii.min.css", {'media' : 'screen'}) %}

Is there a way the regular expression part of the highlighter can be made optional maybe?

[UltraInstinct05]

Currently, the only workaround would be to use the following approach

1. Go to the Packages folder (Preferences -> Browse Packages ...)
2. Create the following folder path BetterTwig/resources/syntax. Create a file called Twig.sublime-syntax.
3. Use the View Package File, from the command palette, search for Twig.sublime-syntax and copy the contents and paste it in the above created file.
4. Comment out L355 to L373. That part implements the regex highlighting stuff. https://github.com/Sublime-Instincts/BetterTwig/blob/master/resources/syntax/Twig.sublime-syntax#L355-L373

Ideally, I would like to have the regex highlighting but not have it present when a template path is provided. However, this should be a temporary problem until I can have a fix for it in place.

Let me know if you run into any issues.

[MeesterPaul]

That workaround is working well for me, thank you for the prompt response!

[lode]

I'm having the same issue. Indeed often it isn't possible to start the string differently.

Btw, regex doesn't have to start & end with slashes. Any character that is repeated is allowed, or matching brackets. E.g. '{foo}' is valid regex. So the pattern recognition in https://github.com/Sublime-Instincts/BetterTwig/blob/master/resources/syntax/Twig.sublime-syntax#L355-L373 isn't really covering it anyway.

Isn't the solution to recognizing this correctly that it should have matches in front, like matches '{foo}'?

[kitsguru]

the workaround by commenting out lines 355 to 373 no longer works. What are the appropriate lines to comment out now? Maybe show the actual text so in future they can be mapped.

[UltraInstinct05]

You can just remove line https://github.com/Sublime-Instincts/BetterTwig/blob/master/resources/syntax/Twig.sublime-syntax#L359 & L361. (The actual text being those includes pointed out by the lines).

[kitsguru]

I remove lines 359 & 361 and the syntax highlighting is still broken. Then removed lines 364-382 and still broken.

[UltraInstinct05]

Removing 364 - 382 should definitely have helped, since those are the offending contexts. Did you create the override as mentioned here https://github.com/Sublime-Instincts/BetterTwig/issues/12#issuecomment-710810689 (Ideally, I'd like to fix this without overrides, but short of time at the moment).

[kitsguru]

Yes I created the override in Packages/BetterTwig/resources/syntax/Twig.sublime-syntax

I deleted lines 359, 361 and 364-382 and restarted Sublime. Still broken. BTW I am using Sublime Text 4 Build 4107

[UltraInstinct05]

The ST build shouldn't matter since the syntax is not using any ST4 specific features. Could you provide a sample code block so that I can try & reproduce locally ?

[UltraInstinct05]

Could you try Packages/Twig/resources/syntax/Twig.sublime-syntax instead. PC installs it as Twig.sublime-package even though the repo name is BetterTwig

[kitsguru]

I am on Macos Big Sur 11.4. Renaming BetterTwig to Twig worked. I checked Installed Packages and it is Twig.sublime-package. Package Control shows it as TWIG but points to BetterTwig Repo

[gRegorLove]

I'm also experiencing this. +1 for @lode's suggestion above.

[dawidmachon]

Hi, any pernament solutions or plan for it? I didn't check yet your workaround for my problem, so let you know tommorow.

But, I will leave trace my issue similar with replace({'/':'-'}).

Longer part code, the same as reference image:

{% if page.meta.template == "single" and not page.hidden %}
<li><a href="#{{ page.id | replace({'/':'-'}) }}">{{ page.title }}</a></li>
{% endif %}
{% endfor %}
<li><a href="#contact">Contact</a></li>

[UltraInstinct05]

I have pushed a new tag release that removes the context that causes it. So the syntax highlighting should now be not broken. For everyone else in this thread, please delete any Twig.sublime-syntax overrides (because it's not needed anymore). Once I have some time, I'll ideally push a proper fix for this in the future.

[dawidmachon]

1.0.6 works like charm.

Thanks!