从pre / code标签中删除空格

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>
	<code class="language-css">
.some_code{


}
     </code>
</pre>

Answer 1

似乎正在考虑<code>块内部的换行符。我想你必须修剪你的代码。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：它将删除所有边距和＆amp;从中填充。

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