Question

我使用prism.js库来进行＃34;语法高亮＆＃34;我的代码片段。代码段可以是代码块：

<pre>
  <code class="language-java">
    int a = 3;
    int b = 5;
  </code>
</pre>

或简单的内联代码：

Type <code>git log</code> in your prompt!

我试图模仿github-way来设置这两个片段类别的样式，例如见here。

这是我当前（损坏的）CSS代码：http://jsfiddle.net/hdy44/2/

是否存在仅将border-radius应用于不属于code元素子元素的pre元素的方式？

当然，我可以在内联inline元素中添加自定义类（例如code），然后仅将border-radius应用于pre和{{1} }，但这需要更多的输入。

Answer 1

工作副本：http://jsfiddle.net/hdy44/3/

pre {
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    border: 1px solid #BCBEC0;
    background: #F1F3F5;
    font:12px Monaco,Consolas,"Andale  Mono","DejaVu Sans Mono",monospace
}

code {
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border: 1px solid #BCBEC0;
    padding: 2px;
    font:12px Monaco,Consolas,"Andale  Mono","DejaVu Sans Mono",monospace
}

pre code {
    border-radius: 0px; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border: 0px;
    padding: 2px;
    font:12px Monaco,Consolas,"Andale  Mono","DejaVu Sans Mono",monospace
}

您需要为与pre一起使用的代码标记创建CSS。然后覆盖边框半径和边框。

Answer 2

您可以通过为所有代码元素设置border-radius来解决此问题，然后为pre元素中出现的那些元素覆盖它，如下所示：

code{
 border-radius: 25px;
}

pre code{
 border-radius: 0px;
}

因为第二个css片段更具体，它将覆盖第一个。

Github式内联代码样式

2 个答案: