Question

以下是HTML，非常简单：

<script>hljs.initHighlightingOnLoad();</script>
<div class="container">
    <section>
        <pre>
            <code>
                function() {
                    console.log("test");
                }
            </code>
        </pre>
    </section>
</div>

我尝试了一些CSS，但它并没有改变任何东西：

code {
    text-align: left;
}
pre {
    padding-top: 0;
    padding-bottom: 0;
}

您可以在this fiddle中看到它的样子。我想要左侧的代码，以及顶部<pre>和<code>之间的巨大填充是什么？谢谢！
更新： Here是一个有效的版本，尽管HTML看起来并不太好。有没有人有更好的主意？

Answer 1

这是因为pre标记。它将给定内容作为预先格式化。这意味着它以文档中使用的方式显示选项卡和空格。删除JS代码前面的选项卡和空格，它可以正常工作。

<pre>
// code example goes here without any indentation
</pre>

highlight.js和Bootstrap的问题

1 个答案: