MurhafSousli / ngx-highlightjs

Angular syntax highlighting module
https://ngx-highlight.netlify.app/
MIT License
278 stars 35 forks source link

Multiline strings on C# breaks highlighting #275

Closed fschick closed 7 months ago

fschick commented 11 months ago

Reproduction

Steps to reproduce: See https://stackblitz.com/edit/ngx-highlightjs-ifd39t?file=src%2Fmain.ts

Expected Behavior

Highlighting for codeWithLinebreakInString should work. It's working with the highlight.js demo https://highlightjs.org/demo

Actual Behavior

The code for codeWithLinebreakInString isn't highlighted. Have a look to the first keyword var.

Environment

MurhafSousli commented 11 months ago

I think I figured it out. In the highlight directive, we are using the highlightAuto() function, which detects the language then highlights the code. for that given code the function did not detect the CS language, so it just printed the text value out.

Could be the code you provided has a syntax error or the parser on highlight.js side has a bug for CS language!

When I tired the other function highlight(value: string, { language: string, ignoreIllegals: boolean}) it worked when I set ignoreIllegals to true, while it didn't work when it was set to false.

Here is a reproduction https://stackblitz.com/edit/ngx-highlightjs-fqcvkn?file=src%2Fmain.ts


As a workaround, I would suggest that you load the full hljs library instead of the core and the language, then use the function:

  ngAfterViewInit() {
    setTimeout(() => {
      document.querySelectorAll('code').forEach((el: HTMLElement) => {
        this.hljs.highlightElement(el).subscribe();
      });
    }, 500)
}

Or this.hljs.highlightAll().subscribe()

workaround stackblitz: https://stackblitz.com/edit/ngx-highlightjs-dissgd?file=src%2Fmain.ts

I will need to refactor the directive to use the highlight function, instead of the highlightAuto and change languages input to language and add ignoreIllegals input in this case

fschick commented 11 months ago

Thank you for the quick reply and the workaround. The C# code is syntactically correct, it might be a bug in highlight.js. Of course, I prefer the bug to be fixed. But I think it needs more investigation and maybe a bug report on highlight.js. Nevertheless, using highlight and provide ignoreIllegals will be a good enhancement.

For my use case - a demo for training purposes - the workaround is perfectly adequate. Feel free to close this bug if you don't prefer to investigate further.

MurhafSousli commented 7 months ago

in v11, you can now use it with highlight directive like this

<pre>
  <code [highlight]="code" language="cs"></code>
</pre>

Here is a fixed stackblitz