Prismjs没有突出显示动态内容

Question

我使用Prismjs进行语法高亮显示，我这样做的方式是使用fetch方法从json文件中获取数据，并使用js动态渲染html。问题是Prismjs在本地环境中完成了它的工作，但在生产中没有，顺便说一句，我正在使用Netlify来托管网站。我也在使用Prismjs.highlightall((方法，但在托管网站后它似乎无法工作。网站链接：css shorthands
我的JSON文件

[
{
"id": "background",
"name": "background",
"longhand": "n  .element {nt background-color: #000;nt background-image: url(image.png);nt background-repeat: no-repeat;nt background-position: top left;nt background-attachment: fixed;n  }",
"shorthand": "n  .element {nt background: #000 url(img.png)no-repeat top left fixed;n  }"
},
{
"id": "border",
"name": "border",
"longhand": "n  .element {nt border-width: 1px;nt border-style: solid;nt border-color: black;n  }",
"shorthand": "n  .element {nt border: 1px solid black;n  }"
},
{
"id": "outline",
"name": "outline",
"longhand": "n  .element {nt outlie-width: thick;nt outline-style: dotted;nt outline-color: red;n  }",
"shorthand": "n  .element {nt outline: thick dotted red;n  }"
},
{
"id": "font",
"name": "font",
"longhand": "n  .element {nt font-weight: bold;nt font-style: italic;nt font-variant: small-caps;nt font-size: 1em;nt line-height: 1.6;nt font-family: Arial, Helvetica, sans-serif;n }",
"shorthand": "n  .element {nt font: bold italic small-caps 1em/1.6 Arial, Helvetica, sans-serif;n  }"
},
{
"id": "margin",
"name": "margin",
"longhand": "n  .element {nt margin-top: 1em;nt margin-right: 1.5em;nt margin-bottom: 2em;nt margin-left: 2.5em; n  } nn /* or */ nn  .element {nt margin-top: 1em;nt margin-right: .5em;nt margin-bottom: 1em;nt margin-left: .5em; n  }",
"shorthand": "n  .element {nt margin: 1em 1.5em 2em 2.5em;n  } nn /* or */ nn  .element {nt margin: 1em .5em;n  }"
},
{
"id": "padding",
"name": "padding",
"longhand": "n  .element {nt padding-top: 1em;nt padding-right: 1.5em;nt paddin-bottom: 2em;nt padding-left: 2.5em; n  } nn /* or */ nn  .element {nt padding-top: 1em;nt padding-right: .5em;nt padding-bottom: 1em;nt padding-left: .5em; n  }",
"shorthand": "n  .element {nt padding: 1em 1.5em 2em 2.5em;n  } nn /* or */ nn  .element {nt padding: 1em .5em; n  }"
},
{
"id": "list",
"name": "list",
"longhand": "n  .element {nt list-style-type: square;nt list-style-position: inside;nt list-style-image: url("image.png");n  }",
"shorthand": "n  .element {nt list: square inside url("image.png");n  }"
},
{
"id": "animation",
"name": "animation",
"longhand": "n  .element {nt animation-name: motion;nt animation-duration: 2s;nt animation-timing-function: ease-in;nt animation-delay: 1s;nt animation-direction: alternate;nt animation-iteration-count: infinite;;nt animation-fill-mode: none;nt animation-play-state: running;n  }",
"shorthand": "n  .element {nt animation: motion 2s ease-in 1s alternate infinite none running;n  }"
},
{
"id": "flex",
"name": "flex",
"longhand": "n  .element {nt flex-grow: 1;nt flex-shrink: 1;nt flex-basis: auto;n  }",
"shorthand": "n  .element {nt flex: 1 1 auto;n  }"
}
]

JavaScript代码：

const root = document.getElementById("root");
fetch("./shorthands.json")
.then((res) => res.json())
.then((data) => appendData(data))
.catch((err) => console.log(err));
function appendData(data) {
for (let i = 0; i < data.length; i++) {
const syntaxContainer = document.createElement("div");
syntaxContainer.classList.add("w-full", "py-5");
syntaxContainer.innerHTML = `<div class="flex items-center" id="${data[i].id}">
<img src="./hashtag.svg" alt="hashlink" class="w-8" />
<h1 class="text-white text-3xl">${data[i].name}</h1>
</div>
<div class="mt-5 ml-2 text-white">
<p class="text-lg">longhand</p>
<pre id="pre" >
<code class="language-css">${data[i].longhand}
</code></pre>
</div>
<div class="mt-5 ml-2 text-white">
<p class="text-lg">shorthand</p>
<pre><code class="language-css ">${data[i].shorthand}
</code></pre>
</div>
</div>
`;
root.appendChild(syntaxContainer);
}
}

Answer 1

我想渲染的一些python代码也遇到了类似的问题。通过首先将字符串传递给Prism.highlight((来解决问题。因此，如果您的输入字符串是input_str

html_with_highlight = Prism.highlight(input_str, Prism.languages.html, 'html'); syntaxContainer.innerHTML = html_with_highlight;

您可以在这里找到功能文档。

希望能有所帮助！