Github-like inline code styling

Question

I'm using the prism.js library to "syntax-highlight" my code snippets. A snippet can be a code block:

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

or a simple inline code:

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

I'm trying to mimic the github-way to style these two snippet categories, e.g. see here.

This is my current (broken) CSS code: http://jsfiddle.net/hdy44/2/

Does exist a way to apply the border-radius only to code elements that are not children of pre elements?

Of course I can add a custom class (e.g. inline) to the inline code elements and then apply the border-radius only to pre and to .inline, but this would require more typing.

Answer 1

Working copy: 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
}

You need to create CSS for the code tag that is used with pre. then override the border radius and border.