Pretty Code Block in CSS

pre {
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 95%;
    line-height: 140%;
    white-space: pre;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
}       

code {
    font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    font-size: 95%;
    line-height: 140%;
    white-space: pre;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    background: #faf8f0;
}

#content code {
    display: block;
    padding: 0.5em 1em;
    border: 1px solid #bebab0;
}

1 comment to Pretty Code Block in CSS

• Adi

  January 13, 2012 at 11:40 am · Reply

  I’ve made some significant changes to how I am formatting <code> and <pre> blocks now. This is the updated CSS.
  

  pre {
      font-size: 90%;
      line-height: 1.2em;
      font-family: "Courier 10 Pitch", Courier, monospace; 
      white-space: pre; 
      white-space: pre-wrap; 
      white-space: -moz-pre-wrap; 
      white-space: -o-pre-wrap; 
  
      height:1%;
      width: auto;
      display: block;
      clear: both;
      color: #555555;
      padding: 1em 1em;
      margin: auto 40px auto 40px;
      background: #f4f4f4;
      border: solid 1px #e1e1e1
  } 
  code { 
      font-size: 90%;
      line-height: 1.2em;
      font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  
      display: inline; 
      color: #555555;
      padding: 1em 1em;
      background: #f4f4f4;
  }