Issues with highlight.js and Bootstrap

Question

Here is the HTML, pretty straight forward:

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

And I tried some CSS, but it didn't change anything:

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

You can see how it looks like in this fiddle. I want the code on the left, and what is up that giant padding between the top <pre> and <code>? Thanks!
UPDATE: Here is a working version, although the HTML doesn't look too good. Does anyone have a better idea?

Answer 1

This is because of the pre tag. It takes the given content as preformatted. This means it shows the tabs and spaces the way they are used in your document. Remove the tabs and spaces in front of your JS code and it works fine.

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