Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiline strings on C# breaks highlighting #275

Closed
fschick opened this issue Dec 3, 2023 · 3 comments · Fixed by #279
Closed

Multiline strings on C# breaks highlighting #275

fschick opened this issue Dec 3, 2023 · 3 comments · Fixed by #279
Labels

Comments

@fschick
Copy link

fschick commented Dec 3, 2023

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
@MurhafSousli
Copy link
Owner

MurhafSousli commented Dec 4, 2023

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
Copy link
Author

fschick commented Dec 4, 2023

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 MurhafSousli linked a pull request Mar 26, 2024 that will close this issue
@MurhafSousli
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants