html – 类似Github的内联代码样式

概述我正在使用 prism.js库来“语法高亮”我的代码片段. 代码段可以是代码块： <pre> <code class="language-java"> int a = 3; int b = 5; </code></pre> 或简单的内联代码： Type <code>git log</code> in your prompt! 我试图模仿github-way来设置这两个片段 我正在使用 prism.js库来“语法高亮”我的代码片段.
代码段可以是代码块：

<pre>  <code >    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仅应用于不是pre元素子元素的代码元素的方法？

当然,我可以为内联代码元素添加一个自定义类(例如内联),然后仅将border-radius应用于pre和to .inline,但这需要更多的输入.

解决方法 工作副本： 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,monospace}pre code {    border-radius: 0px;     -moz-border-radius: 0px;     -webkit-border-radius: 0px;     border: 0px;    padding: 2px;    Font:12px Monaco,monospace}

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

总结

以上是内存溢出为你收集整理的html – 类似Github的内联代码样式全部内容，希望文章能够帮你解决html – 类似Github的内联代码样式所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。