ngx-highlightjs icon indicating copy to clipboard operation
ngx-highlightjs copied to clipboard

Multiline strings on C# breaks highlighting

Open fschick opened this issue 8 months ago • 2 comments

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

  • Angular: 17.0.0
  • ngx-highlightjs: 10.0.0
  • Browser(s): At least Chrome and Firefix
  • Operating System: At least Windows

fschick avatar Dec 03 '23 18:12 fschick

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

MurhafSousli avatar Dec 04 '23 03:12 MurhafSousli

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.

fschick avatar Dec 04 '23 07:12 fschick

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

MurhafSousli avatar Mar 28 '24 04:03 MurhafSousli