html - Issues with highlight.js and Bootstrap -

html - Issues with highlight.js and Bootstrap -

here html, pretty straight forward:

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

and tried css, didn't alter anything:

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

you can see how looks in this fiddle. want code on left, , giant padding between top <pre> , <code>? thanks! update: here working version, although html doesn't good. have improve idea?

this because of pre tag. takes given content preformatted. means shows tabs , spaces way used in document. remove tabs , spaces in front end of js code , works fine.

<pre> // code illustration goes here without indentation </pre>

html css twitter-bootstrap highlight.js