Skip to main content

Displaying code snippets easily

By February 21, 2013One Comment

With the new site and all I’ve some CSS to get through.

I wanted to make the “pre” element work as a code snippet display for me, and needed a fix to get it to wrap text (since the “width” attribute has been defunct for some time).

Here’s the solution!

pre {
 background-color: #F2F2F2;
 padding: 5px 5px 5px 5px;
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */

Author Peter

More posts by Peter

Join the discussion One Comment

  • Sadly with WordPress in particular this isn’t much help, because php code still gets executed rather than displayed.

    I do recommend “SyntaxHighlighter Evolved”, a plugin that makes displaying code pretty damn simple.

Leave a Reply