如何在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))}}]])