MurhafSousli / ngx-highlightjs

Angular syntax highlighting module

Home Page:https://ngx-highlight.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Multiline strings on C# breaks highlighting

fschick opened this issue · 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

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

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.

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