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?

Dunlap

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>

Cohl

Thanks, Here's the update: link. However, now the HTML looks pretty messy. Is this the only way? – Dunlap

Sorry, i have no ideas how to accomplish this. Maybe you should ask a new question about this? – Cohl

wasted 2 hrs for this. – Reisfield