Удалить пустое пространство из префикса/кода

Question

Я использую prism.js для выделения кода. Это код, который я использовал для простого вывода. Проблема в том, что сверху и снизу есть нежелательные белые пробелы. Live example

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

Есть ли способ, чтобы удалить нежелательные пробелы (часть, показанную в красной части) с помощью CSS или 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> 
 
\t <code class="language-css"> 
 
.some_code{ 
 

 

 
} 
 
    </code> 
 
</pre>

Answer 1

кажется, что линия-брейки внутри от <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

Попробуйте это: его удалит все маржу & отступы от этого.

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


} 
</code> 
</pre> 

CSS:

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

Answer 3

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>

Answer 4

Prism.js имеет несколько недружелюбных причуды. Я обновился до этого нового поведения сегодня и не мог исправить все мои сообщения в блоге вручную.

Просто запустите этот код на странице загрузки, чтобы обрезать ведущие/конечные пробелы из всех кодовых блоков.

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

    Prism.highlightAll(); 
});