Highlight applied to parent not to child dom nodes

[Tom Williams]

Reproduction

StackBlitz Example

Steps to reproduce:

1. Create a div and apply the highlight directive to it.
2. Create several child divs where the Nth div is the
3. Set the highlight tag attribute to pre

Expected Behavior

What behavior were you expecting to see?

1. The expectation is that regardless of the Nth position the highlighting would be applied to the element as long as it was a child element.

Actual Behavior

What behavior did you actually see?

1. However, it appears to be applied to the parent div in the case of my Jamstack application or nothing as seen in the StackBlitz
2. This could be related to #23

Environment

• Angular: "@angular/common": "^12.2.8"
• ngx-highlightjs: "ngx-highlightjs": "^5.0.0"
• Browser(s): Edge, Chrome, Firefox, Opera
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11, Ubuntu

Additionally, I believe this is either a repeat of a previous issue or my complete misunderstanding. Secondly I cannot directly change the dom structure as that is coming from a cms and is set via innerHtml.

    <div class="card-text article-body">
      <div [highlight]="pre" [lineNumbers] [innerHTML]="article.content"></div>
    </div>

I sincerely appreciate any and all assistance that anyone can provide on this matter

[Murhaf Sousli]

The [highlight] directive is an input for a code text, and does not highlight the content elements.

For your use case, the highlight directive won't be useful, you should use the HighlightJs service, and call the method manually once your content is ready.

export class MyComponent {

  constructor(private hljs: HighlightJS) {}

  ngAfterViewInit() {
      this.hljs.highlightAll().subscribe();
  }
}

<div #parent>
  <div><p>some content</p></div>
  <div><p>some content</p></div>
  <div><p>some content</p></div>
  <pre><code class="js">console.log('Hello World')</code></pre>
</div>

Note that with Highlight.js v11, you should add the class="js" to your code element because the library doesn't seem to automatically detect it

Reference to highlight.js docs

Here is a fixed reproduction https://stackblitz.com/edit/ngx-highlightjs-euqaa1?file=src%2Fapp%2Fhome%2Fhome.component.ts

Side note: The reproduction link isn't useful when it only shows the demo, better include the editable link.

[Tom Williams]

@MurhafSousli Thank you so much for the help. It was my complete ignorance. That did work most excellently. Also much appreciated for the information on the editable link. Do you happen to know if there is a way to add line numbers using the service? From what I have read there does not appear to be a way to do this.

[Murhaf Sousli]

@TomJWilliams no worries. I tried to implement an angular service for it, but it is not possible, it is made in a way that it executes as soon as as you import it, and doesn't expose functions to call as far as I remember.

I guess I can close the issue now! feel free to continue the discussion..