Remove white space from pre/code tags

Question

I am using prism.js to highlight code.This is the code that i used to make a simple output.The problem is that there are unwanted white spaces on top and bottom. Live example

<pre>
  <code class="language-css">
    &lt;div class="test_class"&gt;&lt;/div&gt;
  </code>
</pre>

Is there a way to remove the unwanted spaces(the part shown in the red part) using css or jquery ?

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css" type="text/css">
<pre>
	<code class="language-css">
.some_code{


}
     </code>
</pre>

Answer 1

It seems that the line-breaks inside of the <code> block is being taken into account. I guess you will have to trim your code.

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css" type="text/css">
<pre>
<code class="language-css">.some_code{


}</code></pre>

Answer 2

Prism.js has a few unfriendly quirks. I updated to this new behaviour today and could not possibly fix all of my blog posts manually.

Just run this code on page load to trim leading/trailing whitespace from all code blocks.

$(document).ready(function(){
  $("code[class^='language-']").each(function(){
    $(this).html($(this).html().trim());
  });

  Prism.highlightAll();
});