snippet.elm

viewSnippet language title snippet =
    div [ class "relative my-8" ]
        [ p [] [ text title ]
        , Html.node "vertol-snippet"
            [ Attributes.attribute "snippet" snippet ]
            [  pre
                []
                [ code
                    [ class <| "language-" ++ language
                    ]
                    []
                ]
            ]
        ]

snippet.js

import Prism from 'prismjs';
import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace.js';

Prism.plugins.NormalizeWhitespace.setDefaults({
  'remove-trailing': true,
  'remove-indent': true,
  'left-trim': true,
  'right-trim': true,
  'break-lines': 80,
});
export default customElements.define(
  'vertol-snippet',
  class extends HTMLElement {
    static get observedAttributes() {
      return ['snippet'];
    }
    constructor() {
      super();

      this._render = this._render.bind(this);
    }

    connectedCallback() {
      this.$el = this.querySelector('[class*="language"]');
      const txt = this.attributes.snippet.textContent;
      this._render(txt);
    }

    attributeChangedCallback(name, oldval, newval) {
      if (name == 'snippet') {
        this.$el && this._render(newval);
      }
    }

    _render(txt) {
      this.$el.innerText = txt.replace(/\n/gi, '\n');
      Prism.highlightElement(this.$el);
    }
  }
);