title: CSS help: how to format code block and code line?
body: <p>I notice code block which is tagged with </p>
  
  <pre><code>&lt;pre&gt;&lt;code&gt;this is my code block&lt;/code&gt;&lt;/pre&gt;
  </code></pre>
  
  <p>and code line which is tagged with<code>&lt;code&gt;this is code line&lt;/code&gt;</code> when Markdown converted to HTML.</p>
  
  <p>Stack-overflow or Github has implemented such kind of css style. So I hacked Github css file:
  <a href="http://github.github.com/github-flavored-markdown/shared/css/documentation.css" rel="nofollow">http://github.github.com/github-flavored-markdown/shared/css/documentation.css</a></p>
  
  <p>Simply using below style doesn't work:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>The test html code is below:</p>
  
  <pre><code>&lt;body&gt;
  &lt;p&gt;This is &lt;code&gt;code&lt;/code&gt; style.&lt;/p&gt;
  
  &lt;pre&gt;&lt;code&gt;Dude, here is code line.
  The second line.
  signing off.
  &lt;/code&gt;&lt;/pre&gt;
  
  &lt;ul&gt;
  &lt;li&gt;&lt;p&gt;If you&amp;rsquo;re using Git you might want to add the following
  configuration setting to protect your project from Windows line
  endings creeping in:&lt;/p&gt;
  
  &lt;pre&gt;&lt;code&gt;```$ git config --global core.autocrlf true```
  &lt;/code&gt;&lt;/pre&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Any idea?</p>
  
  <hr>
  
  <p>Firstly, thank all. sorry, I don't understand the two tags <code>pre</code> and <code>code</code>, as well don't understand how the two tags mapping to block-level code and inline code.</p>
  
  <p>For block-level code, <code>&lt;pre&gt;</code> tag is used for it even though <code>&lt;code&gt;</code> is after <code>&lt;pre&gt;</code>, I must write <code>pre { ... }</code> alone.</p>
  
  <p>For inline code, <code>&lt;code&gt;</code> tag is used for it, this tag parent might be <code>&lt;p&gt;</code>, <code>&lt;li&gt;</code>. so I could use <strong>the element>element selector</strong> in order to distinguish <code>&lt;pre&gt;&lt;code&gt;</code>.</p>
  
  <p>Apply them, it works now.</p>
  
  <p>Thanks,
  Kuaf</p>