我正在使用来自 http://prismjs.com 的 Prism 语法荧光笔
如果我做类似的事情
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="prism.css">
<script type="text/javascript" src="prism.js"></script>
</head>
<body>
<pre>
<code class="language-css">
p { color: blue }
</code>
</pre>
</body>
</html>
我在 Chrome 开发者工具中看到以下结果:
<html>
<head>
<link rel="stylesheet" type="text/css" href="prism.css">
<script type="text/javascript" src="prism.js"></script>
</head>
<body>
<pre class=" language-css">
<code class=" language-css">
<span class="token selector">p</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> blue <span class="token punctuation">}</span>
</code>
</pre>
</body>
</html>
我知道 Prism 将 language-css 类添加到 pre 标签中。但是前导空格 ("language-css") 从何而来？
最佳答案
它可能只是执行 element.className += "language-css" 这样如果元素上已经有一个类(比如 "foo")，它以 foo language-css 而不是 foolanguage-css 结束。由于空格是无害的，因此在 classList 支持良好之前这很常见。
关于javascript - 为什么 Prism 语法高亮器会在 CSS 类前面添加一个空格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41058402/