Question

中的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"）来自哪里？

Answer 1

它可能只是element.className += " language-css"，所以如果元素上已有类（如"foo"），则最终会以foo language-css而不是foolanguage-css结束。由于空间是无害的，所以在classList支持良好之前这是相当普遍的。

为什么Prism语法高亮显示在CSS类前添加空格？

1 个答案: