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

Question

我是网络开发的初学者，一直在尝试将highlight.js格式化一些我正在编写的页面上的代码，但我在正确显示格式化方面遇到了一些麻烦。

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

我可以看到在我的package.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))}}]])