在<pre><code>

时间：2019-02-09 09:31:56

标签： html css

I'm having troubles with some CSS issues with my blog, which is based on Cayman Theme.

The problem I am having is that, after enabling line numbers with Jekyll, the code blocks have gone severely misaligned, as you can see in the following image.

before

My target is to make it look like this:

after

I noticed in Developer Console, that the code block is rendering badly because of an extra code block:

show

Here's a minimal code for you to produce the first image.

.main-content {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    background-color: rgba(255, 255, 255, 0.95);
    max-width: 64rem;
    padding: 3rem 6rem;
    font-size: 1.1rem;
    margin: 0 auto 3rem;
    border-radius: 4rem;
}

.main-content :first-child {
    margin-top: 0;
}

.main-content code {
    padding: 2px 4px;
    font-family: monospace;
    font-size: 0.95em;
    color: #567482;
    background-color: #f3f6fa;
    border-radius: 0.3rem;
}

.main-content pre:not(.highlight) {
    max-height: 30rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font: 0.95em monospace;
    color: #567482;
    word-wrap: normal;
    background-color: #f3f6fa;
    border: solid 1px #dcf0e6;
    border-radius: 0.5rem;
    padding: 0.8rem;
    overflow: auto;
    line-height: 1.45;
    -webkit-overflow-scrolling: touch;
}

.main-content pre:not(.highlight) > code {
    padding: 0;
    margin: 0;
    font-size: inherit;
    color: #567482;
    word-break: normal;
    white-space: pre;
    background: transparent;
    border: 0;
}

.main-content .highlight {
    background-color: #f3f3f3;
    margin-bottom: 1rem;
}

.main-content .highlight pre:not(.highlight) {
    margin-bottom: 0;
    word-break: normal;
    padding: 0.8rem;
    overflow: auto;
    font-size: 0.95em;
    line-height: 1.45;
    border-radius: 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.main-content pre code {
    display: inline;
    max-width: initial;
    padding: 0;
    margin: 0;
    overflow: initial;
    line-height: inherit;
    word-wrap: normal;
    background-color: transparent;
    border: 0;
}

.main-content table {
    border-spacing: 0;
}

.main-content .highlight table th, .main-content .highlight table td {
    padding: 0;
    border: none;
}

* {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #606c71;
    background-color: #15CC57;
    background-image: /*url("https://ibug.github.io/image/bg.jpg"), */ linear-gradient(120deg, #155799, #15CC57);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}
<!DOCTYPE html>
<html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title title title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#159A34">
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <section class="main-content blog-post">
        <div class="language-vb highlighter-rouge">
          <div class="highlight"><pre class="highlight"><code>
            <table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
</pre>
  </td>
  <td class="rouge-code">
    <pre><span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
</pre>
  </td>
</tr>
</tbody>
</table>
</code></pre>
</div>
</div>
</section>
</body></html>

Special Requirement: Since the HTML is generated by Jekyll, it's not convenient for me to change it. I need pure CSS tweaks.

Note: Because I have very little CSS knowledge, the above file is created by reducing code from the real page. I tried to cut off everything unnecessary, but I'm not confident it's the bare minimal.

4 个答案:

答案 0 :(得分：2)

现有答案给出了很好的提示，而令我惊讶的是，最佳答案是如此简单：

pre.highlight {
    white-space: normal;
}

<pre class="highlight">中的空格不再“堆叠”并创建了大量空白区域。

.main-content {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    background-color: rgba(255, 255, 255, 0.95);
    max-width: 64rem;
    padding: 3rem 6rem;
    font-size: 1.1rem;
    margin: 0 auto 3rem;
    border-radius: 4rem;
}

.main-content :first-child {
    margin-top: 0;
}

.main-content code {
    padding: 2px 4px;
    font-family: monospace;
    font-size: 0.95em;
    color: #567482;
    background-color: #f3f6fa;
    border-radius: 0.3rem;
}

.main-content pre:not(.highlight) {
    max-height: 30rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font: 0.95em monospace;
    color: #567482;
    word-wrap: normal;
    background-color: #f3f6fa;
    border: solid 1px #dcf0e6;
    border-radius: 0.5rem;
    padding: 0.8rem;
    overflow: auto;
    line-height: 1.45;
    -webkit-overflow-scrolling: touch;
}

.main-content pre:not(.highlight) > code {
    padding: 0;
    margin: 0;
    font-size: inherit;
    color: #567482;
    word-break: normal;
    white-space: pre;
    background: transparent;
    border: 0;
}

.main-content .highlight {
    background-color: #f3f3f3;
    margin-bottom: 1rem;
}

.main-content .highlight pre:not(.highlight) {
    margin-bottom: 0;
    word-break: normal;
    padding: 0.8rem;
    overflow: auto;
    font-size: 0.95em;
    line-height: 1.45;
    border-radius: 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.main-content pre code {
    display: inline;
    max-width: initial;
    padding: 0;
    margin: 0;
    overflow: initial;
    line-height: inherit;
    word-wrap: normal;
    background-color: transparent;
    border: 0;
}

.main-content table {
    border-spacing: 0;
}

.main-content .highlight table th, .main-content .highlight table td {
    padding: 0;
    border: none;
}

* {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #606c71;
    background-color: #15CC57;
    background-image: /*url("https://ibug.github.io/image/bg.jpg"), */ linear-gradient(120deg, #155799, #15CC57);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

pre.highlight {
    white-space: normal;
}
<!DOCTYPE html>
<html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title title title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#159A34">
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <section class="main-content blog-post">
        <div class="language-vb highlighter-rouge">
          <div class="highlight"><pre class="highlight"><code>
            <table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
</pre>
  </td>
  <td class="rouge-code">
    <pre><span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
</pre>
  </td>
</tr>
</tbody>
</table>
</code></pre>
</div>
</div>
</section>
</body></html>

答案 1 :(得分：1)

问题是code周围的pre和table标签。因此，html也是无效的，因为table和code中都不允许pre。如果删除这些标签，输出将很好。我确信可以编辑Jekyll模板以确保这些标签不再存在。

.main-content {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    background-color: rgba(255, 255, 255, 0.95);
    max-width: 64rem;
    padding: 3rem 6rem;
    font-size: 1.1rem;
    margin: 0 auto 3rem;
    border-radius: 4rem;
}

.main-content :first-child {
    margin-top: 0;
}

.main-content code {
    padding: 2px 4px;
    font-family: monospace;
    font-size: 0.95em;
    color: #567482;
    background-color: #f3f6fa;
    border-radius: 0.3rem;
}

.main-content pre:not(.highlight) {
    max-height: 30rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font: 0.95em monospace;
    color: #567482;
    word-wrap: normal;
    background-color: #f3f6fa;
    border: solid 1px #dcf0e6;
    border-radius: 0.5rem;
    padding: 0.8rem;
    overflow: auto;
    line-height: 1.45;
    -webkit-overflow-scrolling: touch;
}

.main-content pre:not(.highlight) > code {
    padding: 0;
    margin: 0;
    font-size: inherit;
    color: #567482;
    word-break: normal;
    white-space: pre;
    background: transparent;
    border: 0;
}

.main-content .highlight {
    background-color: #f3f3f3;
    margin-bottom: 1rem;
}

.main-content .highlight pre:not(.highlight) {
    margin-bottom: 0;
    word-break: normal;
    padding: 0.8rem;
    overflow: auto;
    font-size: 0.95em;
    line-height: 1.45;
    border-radius: 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.main-content pre code {
    display: inline;
    max-width: initial;
    padding: 0;
    margin: 0;
    overflow: initial;
    line-height: inherit;
    word-wrap: normal;
    background-color: transparent;
    border: 0;
}

.main-content table {
    border-spacing: 0;
}

.main-content .highlight table th, .main-content .highlight table td {
    padding: 0;
    border: none;
}

* {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #606c71;
    background-color: #15CC57;
    background-image: /*url("https://ibug.github.io/image/bg.jpg"), */ linear-gradient(120deg, #155799, #15CC57);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}
<!DOCTYPE html>
<html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title title title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#159A34">
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <section class="main-content blog-post">
        <div class="language-vb highlighter-rouge">
          <div class="highlight">
            <table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
</pre>
  </td>
  <td class="rouge-code">
    <pre><span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
</pre>
  </td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</body></html>

答案 2 :(得分：0)

问题似乎出在<pre> HTML标记中。我知道您说过，更改HTML并不方便，但是可以尝试删除该标签吗？ 还是至少格式化HTML？查看我的解决方案。

  

<pre>标记定义了预格式化的文本。   <pre>元素中的文本以固定宽度的字体（通常为Courier）显示，并且保留空格和换行符。   https://www.w3schools.com/tags/tag_pre.asp 

.main-content {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    background-color: rgba(255, 255, 255, 0.95);
    max-width: 64rem;
    padding: 3rem 6rem;
    font-size: 1.1rem;
    margin: 0 auto 3rem;
    border-radius: 4rem;
}

.main-content :first-child {
    margin-top: 0;
}

.main-content code {
    padding: 2px 4px;
    font-family: monospace;
    font-size: 0.95em;
    color: #567482;
    background-color: #f3f6fa;
    border-radius: 0.3rem;
}

.main-content pre:not(.highlight) {
    max-height: 30rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font: 0.95em monospace;
    color: #567482;
    word-wrap: normal;
    background-color: #f3f6fa;
    border: solid 1px #dcf0e6;
    border-radius: 0.5rem;
    padding: 0.8rem;
    overflow: auto;
    line-height: 1.45;
    -webkit-overflow-scrolling: touch;
}

.main-content pre:not(.highlight) > code {
    padding: 0;
    margin: 0;
    font-size: inherit;
    color: #567482;
    word-break: normal;
    white-space: pre;
    background: transparent;
    border: 0;
}

.main-content .highlight {
    background-color: #f3f3f3;
    margin-bottom: 1rem;
}

.main-content .highlight pre:not(.highlight) {
    margin-bottom: 0;
    word-break: normal;
    padding: 0.8rem;
    overflow: auto;
    font-size: 0.95em;
    line-height: 1.45;
    border-radius: 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.main-content pre code {
    display: inline;
    max-width: initial;
    padding: 0;
    margin: 0;
    overflow: initial;
    line-height: inherit;
    word-wrap: normal;
    background-color: transparent;
    border: 0;
}

.main-content table {
    border-spacing: 0;
}

.main-content .highlight table th, .main-content .highlight table td {
    padding: 0;
    border: none;
}

* {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #606c71;
    background-color: #15CC57;
    background-image: /*url("https://ibug.github.io/image/bg.jpg"), */ linear-gradient(120deg, #155799, #15CC57);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

.gl:before{
    content:"\a\a";
    white-space: pre;
}
<!DOCTYPE html>
<html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title title title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#159A34">
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <section class="main-content blog-post">
        <div class="language-vb highlighter-rouge">
          <div class="highlight"><pre class="highlight"><code>
            <table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
</pre>
  </td>
  <td class="rouge-code">
    <pre><span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
</pre>
  </td>
</tr>
</tbody>
</table>
</code></pre>
</div>
</div>
</section>
</body></html>

答案 3 :(得分：0)

我不认为CSS可以做到。您必须至少更改HTML代码的缩进。尝试像这样从<pre class="highlight">内部的每一行中删除缩进：

* {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #606c71;
    background-color: #15CC57;
    background-image: /*url("https://ibug.github.io/image/bg.jpg"), */ linear-gradient(120deg, #155799, #15CC57);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

.main-content {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    background-color: rgba(255, 255, 255, 0.95);
    max-width: 64rem;
    padding: 3rem 6rem;
    font-size: 1.1rem;
    margin: 0 auto 3rem;
    border-radius: 4rem;
}

.main-content :first-child {
    margin-top: 0;
}

.main-content code {
    padding: 2px 4px;
    font-family: monospace;
    font-size: 0.95em;
    color: #567482;
    background-color: #f3f6fa;
    border-radius: 0.3rem;
}

.main-content pre:not(.highlight) {
    max-height: 30rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font: 0.95em monospace;
    color: #567482;
    word-wrap: normal;
    background-color: #f3f6fa;
    border: solid 1px #dcf0e6;
    border-radius: 0.5rem;
    padding: 0.8rem;
    overflow: auto;
    line-height: 1.45;
    -webkit-overflow-scrolling: touch;
}

.main-content pre:not(.highlight) > code {
    padding: 0;
    margin: 0;
    font-size: inherit;
    color: #567482;
    word-break: normal;
    white-space: pre;
    background: transparent;
    border: 0;
}

.main-content .highlight {
    background-color: #f3f3f3;
    margin-bottom: 1rem;
}

.main-content .highlight pre:not(.highlight) {
    margin-bottom: 0;
    word-break: normal;
    padding: 0.8rem;
    overflow: auto;
    font-size: 0.95em;
    line-height: 1.45;
    border-radius: 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.main-content pre code {
    display: inline;
    max-width: initial;
    padding: 0;
    margin: 0;
    overflow: initial;
    line-height: inherit;
    word-wrap: normal;
    background-color: transparent;
    border: 0;
}

.main-content table {
    border-spacing: 0;
}

.main-content .highlight table th, .main-content .highlight table td {
    padding: 0;
    border: none;
}
<!DOCTYPE html>
<html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Title title title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#159A34">
  <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <section class="main-content blog-post">
      <div class="language-vb highlighter-rouge">
        <div class="highlight">
          <pre class="highlight">
<!-- Removing indentation start -->
<code>
<table class="rouge-table">
<tbody>
<tr>
<td class="rouge-gutter gl">
<pre class="lineno">
1
2
3
4
</pre>
</td>
<td class="rouge-code">
<pre>
<span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
</pre>
</td>
</tr>
</tbody>
</table>
</code>
<!-- Removing indentation end -->
          </pre>
        </div>
      </div>
    </section>
  </body></html>

相关问题
最新问题