Max Rosenbaum

Software developer

Adding highlight.js to elm pages

I updated from elm-pages 1.2.3 to 1.5.5 using the starter template, and it turns out highlight.js was removed from the default template. Undoing the changes in the commit does not trigger highlight.js correctly, so below is an excerpt of how I added it back;

index.js

import highlight from "highlight.js/lib/core.js";
import "highlight.js/styles/androidstudio.css";
import elm from 'highlight.js/lib/languages/elm';

highlight.registerLanguage('elm', elm);

const { Elm } = require("./src/Main.elm");
const pagesInit = require("elm-pages");

// pagesInit will return a promise, so we can simply chain it with then()
pagesInit({
    mainElmModule: Elm.Main
}).then(() => {
    // Any work that needs to happen in a post render should go here.
    window.highlight = highlight
    highlight.highlightAll()
});

This is only for hard page loads however, elm-pages is a SPA that downloads a JSON file to handle all the content. To have scripts that load on each change of URL, your javascript will have to detect changes in the URL and wait for elm to finish its work on the DOM before executing any new code.