HOME > blog > 未分類 > コード表示タグpre/codeをcssで見やすく

  • 投稿日： 最終更新日：
  • カテゴリー： 未分類

コード表示タグ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タグ ～ ソースコードでも折り返して表示