如何在shadow-cljs项目中使用highlight.js?

Question

我非常新手于Web开发，并一直在尝试使highlight.js格式化我在编写的一个页面上的某些代码，但是我在它正确显示格式化方面遇到了困难。

我已经尝试了仅仅从cdnjs引用最小化脚本/样式表，并在我的index.html中调用hljs.initHighlightingOnLoad();，然后格式化像[:pre [:code {:class "Clojure"} "(+ 1 1) ;;=> 2"]]这样的东西，但这没有奏效。

我可以在我的packages.json中看到"highlight.js": "9.15.10"和"react-highlight.js": "^1.0.7"，但我使用[:Highlight {:language "Clojure"} "(+ 1 1)"]也没有成功。

如果有人能告诉我我遗漏了什么，我将非常感激。

Answer 1

不确定这是否是最合适的方法，但我使用了一个 :ref 钩子来在新创建的节点上调用 hljs.highlightBlock()。我的理解是，除非页面上存在所有需要语法高亮的节点，否则 hljs.initHighlightingOnLoad() 不会起作用，而在一个动态应用中，新节点可能会在任何时候添加。

有关特定代码，请参阅我的项目 （点击链接查看）。我很快地拼凑了这个代码，但它可能有助于回答您在工作中遇到的一些问题。

Answer 2

我将代码在渲染到 DOM之前进行高亮的策略作为我的渲染函数的一部分。使用不更改 DOM 而是作为函数使用的库会更加有效。这就是我如何使用 highlight.js 的方法。

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