从pre / code标签中删除空格

Question

我正在使用prism.js来突出显示代码。这是我用来做简单输出的代码。问题是顶部和底部有不需要的空白区域。 实例

<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> <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

Prism.js有一些不友好的怪癖。 我今天更新了这个新行为，无法手动修复我的所有博客帖子。

只需在页面加载时运行此代码即可修剪所有代码块中的前导/尾随空格。

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

  Prism.highlightAll();
});

Answer 4

 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>