How to use highlight.js in a shadow-cljs project?

Question

I am very new to web dev and have been trying to get highlight.js to format some code on a page that I am writing, but I am having trouble getting it to show up correctly formatted.

I have tried just referencing the minimized script/a style sheet from cdnjs and calling hljs.initHighlightingOnLoad(); in my index.html, then formatting things like [:pre [:code {:class "Clojure"} "(+ 1 1) ;=> 2"]] but that did not work.

I can see that there are "highlight.js": "9.15.10" and "react-highlight.js": "^1.0.7" in my packages.json, but using [:Highlight {:language "Clojure"} "(+ 1 1)"] did not work, either.

If someone could show me what I am missing I would be very grateful.

Answer 1

Not sure if this is the best way, but I used a :ref hook to call hljs.highlightBlock() on a newly created node. My understanding is that hljs.initHighlightingOnLoad() doesn't work unless all the nodes needing syntax highlighting are present on the page, and in a dynamic app, new nodes could be introduced at any time.

For specific code, see this project of mine. I hacked that together pretty quickly, but it might help answer some questions as you work through your own needs.

Answer 2

I use the strategy to highlight the code before rendering it to the DOM as a part of my render function. It works better to use libraries that do not mutate the DOM but rather allowing you to use them as functions. This is how I use highlight.js:

(defn get-highlight-code [code]
  [:pre
    [:code {:dangerouslySetInnerHTML
             {:__html (.-value (js/hljs.highlight "clojure" code))}}]])