Highlight breaks when using backquote

[mark-akturatech]

Hello,
First of all - thank you! Your plugin makes pug files a lot easier to read.

I have a small issue when using the backquote (`) to split property bindings over multiple lines. The highlighter appears to register a closing bracket with the backquoted string as a pug attribute closing bracket and therefore all following syntax is not correctly highlighted.

Please see this screenshot for an example of the failed syntax highlights:

[mark-akturatech]

Hello,
I just found another file not rendering properly. Thinking now it is not related to backquote.
See below, it has incorrect colouring after nav.wrapper(middle, #wizardContainer) line.

[ghaschel]

Can you share these snippets in text? I will work directly on them to simulate the error =]

[mark-akturatech]

Oh of course. Sorry, silly of me not to think about doing that in the first place.

section.section-auth
  .sign-up-container
    h1 {{ "Content Snare" }}

    //- left column
    .sign-up-row
      .sign-up-col.left
        h2 {{ "Content Snare" | translate }}
        h3 {{ "Get Content From Your Clients On Time" | translate: null:"":"Heading" }}

        cs-testimonial-slider

        p.login
          span.
            {{ "Already a member?" | translate: null:"":"Subheading" }}
             
          a(routerLink='/auth/sign-in') {{ "Log in to your account" | translate: null:"":"Anchor" }}

      //- right column
      .sign-up-col.right(role='main')
        .alert(
          *ngIf='serverResponse',
          role='alert',
          [innerHtml]=`
            serverResponse === ServerResponse.genericError 
              ? ("<p><strong>Oh no... something went skew-whiff :(</strong></p><p>Please try again later or contact our support team by pressing the <i>cant access your account?</i> link on the # button</p></div>" | translate)
              : ("<p><strong>We can't access your Internet :(</strong></p><p>Please ensure you are connected and try again.</p>" | translate)`
        )

        //- # pages
        ng-container([ngSwitch]='step')
          cs-sign-up-details(
            *ngSwitchCase='#Steps.#Info',
            [form]='#Form',
            (next)='onStep(#Steps.personalInfo)'
          )
          cs-personal-details(
            *ngSwitchCase='#Steps.personalInfo',
            [form]='#Form',
            (next)='onStep(#Steps.companyInfo)'
          )
          cs-new-company-details(
            *ngSwitchCase='#Steps.companyInfo',
            [form]='#Form',
            [isDisabled]='isDisabled',
            (next)='on#Complete()'
          )

        p.mobile-sign-up
          span {{ "Already a member?" | translate: null:"":"Subheading" }}&nbsp;
          a(routerLink='/auth/sign-in') {{ "# to your account" | translate: null:"":"Anchor" }}

and...

cs-toolbar(
  [hasSaveButtons]='false',
  [displayPageTitle]='false',
  [actionItems]='ACTION_OPTIONS',
  [hideActionItems]='true',
  (dropDownOpen)='onDropDownOpen($event)',
  (action)='onSetStep($event)'
)
  div(return)
    button.cs-button.return(*ngIf='previousStep === RequestWizardStep.home', routerLink='/').
      {{ previousStepText || '' | translate }}
    button.cs-button.return(
      *ngIf='!customReturn && previousStep !== RequestWizardStep.home',
      (click)='onSetStep(previousStep)'
    ) {{ previousStepText || "" | translate }}
    ng-content(*ngIf='customReturn')

  nav.wrapper(middle, #wizardContainer)
    .selected(*ngIf='!isWizardVisible') {{ currentStepText || "" | translate }}

    ul(*ngIf='isWizardVisible', role='listbox', aria-label='Edit request wizard steps')
      ng-container(*ngFor='let step of ACTION_OPTIONS; trackBy: trackByFunction')
        li(
          *ngIf='!step.hidden',
          role='option',
          [ngClass]=`{
            selected: currentStep === step.id,
            allowed: (step.id || 0) <= maxAllowedStep
          }`
        )
          span.step((click)='onSetStep(step.id)') {{ step?.text || "" | translate }}
          span.icon.cs-icon-right

[ghaschel]

There are actually three bugs that I could found. One of them is related to ``` not capturing angular interpolations and angular expressions and this I managed to fix already.

But there are two more I'm trying to kill. One of them is related to a new line being mandatory to detect angular interpolations:

and the other one is = being mandatory after an angular directive starter for it to being detected.

I hope to fix this untill the end of the day. Let me know if you find any other one! Thanks for reporting it =]

[mark-akturatech]

@ghaschel
Thank you. But don't rush. It isn't urgent or anything. I just reported the bug as I really enjoy your add-on and thought it was worth reporting to you.
If there is anything I can do to help test, please let me know.

[ghaschel]

Fixed it in 0.3.1.

I will open another issue with the pending bug I didn't have the proper time yet to look into. You can follow it here

[ghaschel]

Please, let me know if this issue is fixed to you.

[mark-akturatech]

@ghaschel Subscribed to the new issue.

Thank you mate. I installed the new version and so far it looks great. I'll let you know in the new bug if I find any specific broken instances.

Thank you again. I appreciate your efforts a lot.