CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Akshay
Akshay

Reputation: 14348

Remove white space from pre/code tags

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>

white space

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>

Upvotes: 8

Views: 4739

Answers (4)

Weston Ganger
Weston Ganger

Reputation: 6712

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

Upvotes: 3

Nico O
Nico O

Reputation: 14102

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>

Upvotes: 8

RealDeepak
RealDeepak

Reputation: 863

Try this: Its will remove all margin & padding from this.

<pre>
<code class="language-css">.some_code{


}
</code>
</pre>

CSS:

pre, code {
    padding:0;
    margin:0;
}

Upvotes: 3

imGaurav
imGaurav

Reputation: 1053

body{margin:0 ; padding:0;}
pre{margin:0!important ; padding:0!important;}
<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">
    &lt;div class="test_class"&gt;&lt;/div&gt;
  </code>
</pre>

Upvotes: 0

Related Questions