コード表示タグpre/codeをcssで見やすく


pre {
  padding: 1em;
  margin-left: 20px;
  color: #666666;
  background-color: #ACD6FF;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -pre-wrap;     /* Opera 4-6 */
  white-space: -o-pre-wrap;   /* Opera 7 */
  white-space: pre-wrap;      /* CSS3 */
  word-wrap: break-word;      /* IE 5.5+ */
}

code {
  font-family: monospace;
  font-weight: normal;
  line-height: 150%;
  text-align: left;
  margin-bottom: 10px;
}

参考にさせていただいたのは
[CSS] preタグ codeタグ ~ ソースコードでも折り返して表示