作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Prismjs 进行语法高亮显示,我这样做的方式是使用 fetch 方法从 json 文件中获取数据,然后使用 js 动态渲染 html。问题是 Prismjs 在本地环境中完成它的工作而不是在生产环境中,顺便说一句,我正在使用 Netlify 来托管该站点。我也在使用 Prismjs.highlightall() 方法,但在托管网站后它似乎无法工作。网站链接:css-shorthands
我的 JSON 文件
[
{
"id": "background",
"name": "background",
"longhand": "\n .element {\n\t background-color: #000;\n\t background-image: url(image.png);\n\t background-repeat: no-repeat;\n\t background-position: top left;\n\t background-attachment: fixed;\n }",
"shorthand": "\n .element {\n\t background: #000 url(img.png)no-repeat top left fixed;\n }"
},
{
"id": "border",
"name": "border",
"longhand": "\n .element {\n\t border-width: 1px;\n\t border-style: solid;\n\t border-color: black;\n }",
"shorthand": "\n .element {\n\t border: 1px solid black;\n }"
},
{
"id": "outline",
"name": "outline",
"longhand": "\n .element {\n\t outlie-width: thick;\n\t outline-style: dotted;\n\t outline-color: red;\n }",
"shorthand": "\n .element {\n\t outline: thick dotted red;\n }"
},
{
"id": "font",
"name": "font",
"longhand": "\n .element {\n\t font-weight: bold;\n\t font-style: italic;\n\t font-variant: small-caps;\n\t font-size: 1em;\n\t line-height: 1.6;\n\t font-family: Arial, Helvetica, sans-serif;\n }",
"shorthand": "\n .element {\n\t font: bold italic small-caps 1em/1.6 Arial, Helvetica, sans-serif;\n }"
},
{
"id": "margin",
"name": "margin",
"longhand": "\n .element {\n\t margin-top: 1em;\n\t margin-right: 1.5em;\n\t margin-bottom: 2em;\n\t margin-left: 2.5em; \n } \n\n /* or */ \n\n .element {\n\t margin-top: 1em;\n\t margin-right: .5em;\n\t margin-bottom: 1em;\n\t margin-left: .5em; \n }",
"shorthand": "\n .element {\n\t margin: 1em 1.5em 2em 2.5em;\n } \n\n /* or */ \n\n .element {\n\t margin: 1em .5em;\n }"
},
{
"id": "padding",
"name": "padding",
"longhand": "\n .element {\n\t padding-top: 1em;\n\t padding-right: 1.5em;\n\t paddin-bottom: 2em;\n\t padding-left: 2.5em; \n } \n\n /* or */ \n\n .element {\n\t padding-top: 1em;\n\t padding-right: .5em;\n\t padding-bottom: 1em;\n\t padding-left: .5em; \n }",
"shorthand": "\n .element {\n\t padding: 1em 1.5em 2em 2.5em;\n } \n\n /* or */ \n\n .element {\n\t padding: 1em .5em; \n }"
},
{
"id": "list",
"name": "list",
"longhand": "\n .element {\n\t list-style-type: square;\n\t list-style-position: inside;\n\t list-style-image: url(\"image.png\");\n }",
"shorthand": "\n .element {\n\t list: square inside url(\"image.png\");\n }"
},
{
"id": "animation",
"name": "animation",
"longhand": "\n .element {\n\t animation-name: motion;\n\t animation-duration: 2s;\n\t animation-timing-function: ease-in;\n\t animation-delay: 1s;\n\t animation-direction: alternate;\n\t animation-iteration-count: infinite;;\n\t animation-fill-mode: none;\n\t animation-play-state: running;\n }",
"shorthand": "\n .element {\n\t animation: motion 2s ease-in 1s alternate infinite none running;\n }"
},
{
"id": "flex",
"name": "flex",
"longhand": "\n .element {\n\t flex-grow: 1;\n\t flex-shrink: 1;\n\t flex-basis: auto;\n }",
"shorthand": "\n .element {\n\t flex: 1 1 auto;\n }"
}
]
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);
}
}
最佳答案
我想渲染的一些 python 代码也有类似的问题。通过首先将字符串传递给 Prism.highlight() 来解决它。因此,如果您的输入字符串是 input_str
html_with_highlight = Prism.highlight(input_str, Prism.languages.html, 'html'); syntaxContainer.innerHTML = html_with_highlight;
您可以找到功能文档here .
希望对您有所帮助!
关于javascript - Prismjs 不突出显示动态内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66914357/
有没有一种方法可以“标记”对象的属性,使它们在反射中“突出”? 例如: class A { int aa, b; string s1, s2; public int AA
我是一名优秀的程序员,十分优秀!