# How to call highlight.js after DOM change in Elm

**URL:** <https://discourse.elm-lang.org/t/how-to-call-highlight-js-after-dom-change-in-elm/7625>\
**Category:** Learn\
**Created:** [August 5, 2021, 1:58pm UTC](https://discourse.elm-lang.org/t/how-to-call-highlight-js-after-dom-change-in-elm/7625 "2021-08-05T13:58:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![redplacemat](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/redplacemat/32/4217_2.png) [@redplacemat](https://discourse.elm-lang.org/u/redplacemat)\
**Post date:** [August 5, 2021, 1:58pm UTC](https://discourse.elm-lang.org/t/how-to-call-highlight-js-after-dom-change-in-elm/7625/1 "2021-08-05T13:58:07Z")

</div>

Hi - I have an elm app that uses `elm-explorations/markdown` to render markdown into HTML. That markdown might contain code blocks that I’d like to highlight using [Highlight.js](https://highlightjs.org/). I think I need to trigger the `highlightAll()` method of Highlight.js whenever the DOM changes and new code blocks appear, but I’m not sure how best to do so. I’d _really_ appreciate advice!

---

<div class="post-metadata">

**Author:** ![grigorious](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/grigorious/32/3549_2.png) [@grigorious](https://discourse.elm-lang.org/u/grigorious)\
**Post date:** [August 5, 2021, 3:52pm UTC](https://discourse.elm-lang.org/t/how-to-call-highlight-js-after-dom-change-in-elm/7625/2 "2021-08-05T15:52:03Z")

</div>

Hi,  
you can use [ports](https://guide.elm-lang.org/interop/ports.html) to communicate with JS or you can use [elm-syntax-highlight](https://package.elm-lang.org/packages/pablohirafuji/elm-syntax-highlight/latest/) → this is used by [elm pages](https://elm-pages.com)

---

<div class="post-metadata">

**Author:** ![wolfadex](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/wolfadex/32/2461_2.png) [@wolfadex](https://discourse.elm-lang.org/u/wolfadex)\
**Post date:** [August 5, 2021, 5:13pm UTC](https://discourse.elm-lang.org/t/how-to-call-highlight-js-after-dom-change-in-elm/7625/3 "2021-08-05T17:13:33Z")

</div>

You could possibly use [custom elements](https://guide.elm-lang.org/interop/custom_elements.html) too. Have a custom element that wraps Highlight.js and knows when to call `highlightElement()` on itself. Not sure if this would be better or worse than the ports approach though.

edit:  
We actually do something similar to this at work, though not in Elm the approach would be the same. We have a framework specific component that we pass the code to and inside that component we use Highlight.js to generate the highlighted code and then set that as the child. For Elm you’d have something like

```elm
Html.node "code-highlight"
    [Html.Attributes.attribute "code" youCodeAsAString]
    []

```

and in your custom element you’d have something roughly like

```javascript
customElements.define("code-highlight", class extends HTMLElement {
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === "code" && oldValue !== newValue) {
      // use Highlight.js here to generate highlighted code
    }
});

```

There’s definitely a little more to setting up your custom element but that’s roughly what would be needed. You’d also probably want some other attributes or properties for setting which language you want to hightlight.

edit2:

An mvp in Ellie [https://ellie-app.com/dVVZwDwsxCMa1](https://ellie-app.com/dVVZwDwsxCMa1). Definitely needs some refinement 😅

edit3:

An update to the above Ellie [https://ellie-app.com/dVWhnqrYck5a1](https://ellie-app.com/dVWhnqrYck5a1) that includes actual highlighting and a little more code being highlighted.

---

<div class="post-metadata">

**Author:** ![lucamug](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lucamug/32/1764_2.png) [@lucamug](https://discourse.elm-lang.org/u/lucamug)\
**Post date:** [August 5, 2021, 10:29pm UTC](https://discourse.elm-lang.org/t/how-to-call-highlight-js-after-dom-change-in-elm/7625/4 "2021-08-05T22:29:23Z")

</div>

In a recent project I had the same issue. I tried to re-apply the syntax hilighter using ports but this caused the app to crash as it is modifing the DOM.

My solution has been to use `dillonkearns/elm-markdown` and `pablohirafuji/elm-syntax-highlight`, so now everything is 100% Elm and is working out of the box.

You can see the code here: [elm-exercises/Markdown.elm at master · lucamug/elm-exercises · GitHub](https://github.com/lucamug/elm-exercises/blob/master/src/Internal/Markdown.elm) (still messy)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [August 15, 2021, 10:29pm UTC](https://discourse.elm-lang.org/t/how-to-call-highlight-js-after-dom-change-in-elm/7625/5 "2021-08-15T22:29:37Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.