Question

我注意到用

标记的代码块

<pre><code>this is my code block</code></pre>

当Markdown转换为HTML时，

和标有<code>this is code line</code>的代码行。

Stack-overflow或Github实现了这种css风格。所以我攻击了Github css文件： http://github.github.com/github-flavored-markdown/shared/css/documentation.css

仅使用以下样式不起作用：

code {
  font: 12px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
  color: #52595d;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  padding: 0px 3px;
  display: inline-block;
  margin: 0px;
}


pre {
  border: 1px solid #cacaca;
  line-height: 1.2em;
  font: 12px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
  padding: 10px;
  overflow:auto;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #FAFAFB;
  color: #393939;
  margin: 0px;
}

测试html代码如下：

<body>
<p>This is <code>code</code> style.</p>

<pre><code>Dude, here is code line.
The second line.
signing off.
</code></pre>

<ul>
<li><p>If you&rsquo;re using Git you might want to add the following
configuration setting to protect your project from Windows line
endings creeping in:</p>

<pre><code>```$ git config --global core.autocrlf true```
</code></pre></li>
</ul>

</body>

有什么想法吗？

首先，谢天谢地。抱歉，我不理解这两个标记pre和code，也不了解两个标记如何映射到块级代码和内联代码。

对于块级代码，即使<pre>位于<code>之后，也会使用<pre>标记，我必须单独编写pre { ... }。

对于内联代码，使用了<code>标记，此标记内容可能是<p>，<li>。所以我可以使用元素＆gt;元素选择器来区分<pre><code>。

应用它们，它现在有效。

谢谢， Kuaf

Answer 1

如果您的问题区分<pre><code>和<code>，正如您在评论中所说，那么解决方案就是使用表格的CSS规则

pre code { /* declarations here */ }

仅适用于code pre内应适用的属性。在那里，您可以覆盖只有code作为选择器的规则中的任何设置。

Answer 2

尝试将css中的code和pre更改为.code和.pre，然后更改以下内容：

<body>
<p>This is <code>code</code> style.</p>

<span class="pre"><span class="code">Dude, here is code line.
The second line.
signing off.
</span></span>

<ul>
<li><p>If you&rsquo;re using Git you might want to add the following
configuration setting to protect your project from Windows line
endings creeping in:</p>

<span class="pre"><span class="code">```$ git config --global core.autocrlf true```
</span></span></li>
</ul>

</body>

跨度tage非常有用，因为它默认不执行任何操作。这意味着通过更改类，您可以使用css

以任何方式格式化它

CSS帮助：如何格式化代码块和代码行？

2 个答案: