ngx-highlightjs
ngx-highlightjs copied to clipboard
Multiline strings on C# breaks highlighting
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