CODEWITHSUNDEEP
htmlcss
eang
eang

Reputation: 1645

Github-like inline code styling

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.

Upvotes: 4

Views: 3084

Answers (2)

user1618236
user1618236

Reputation:

You can solve this by setting the border-radius for all code elements and then override it for those that appear within a pre element, something like this:

code{
 border-radius: 25px;
}

pre code{
 border-radius: 0px;
}

because the second css snippet is more specific it will override the first.

Upvotes: 4

John Riselvato
John Riselvato

Reputation: 12924

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.

Upvotes: 4

Related Questions