highlight.js和Bootstrap的问题

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;
}

你可以看到它在这个小提琴中的样子.我想要左边的代码,顶部<pre>和顶部之间的巨大填充是什么<code>？谢谢!
更新: 这是一个工作版本,虽然HTML看起来不太好.有没有人有更好的主意？

Answer 1

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

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