我注意到标记为的代码块
<pre><code>this is my code block</code></pre>
和标记为
<code>this is code line</code> 的代码行当 Markdown 转换为 HTML 时。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’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 ，以及不明白这两个标签如何映射到 block 级代码和内联代码。对于 block 级代码，
<pre>标签用于它，即使 <code>在 <pre> 之后，我必须写pre { ... }独自的。对于内联代码，
<code>标签用于它，这个标签父可能是<p> , <li> .所以我可以使用 元素>元素选择器为了区分<pre><code> .应用它们，它现在可以工作了。
谢谢，
夸夫
最佳答案
如果您的问题是区分 <pre><code>和 <code> ，正如您在评论中所说，那么解决方案是使用表单的 CSS 规则
pre code { /* declarations here */ }
对于那些应该适用于
code 的属性仅当它在 pre 内时.在那里，您可以覆盖仅具有 code 的规则中的任何设置。作为选择器。
关于CSS 帮助 : how to format code block and code line?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9045677/