Eiche fam

I got an email the other day, asking how to display code snippets in Cover. I felt that it deserved a blog post.

This user was seeing his code snippets showing up like this:

// code snippet

See how it’s completely flush left? That’s not supposed to happen (even on small screens, there will be some margin). It should look like this:

// code snippet

So what’s the difference? His code looked like this:

<pre>
  // code snippet
</pre>

But mine looks like this:

<pre>
  <code>
    // code snippet
  </code>
</pre>

Remember that Cover is designed for use with Aesop Story Engine, and as such, breaks specific elements out of the typical 760px column width. One of those elements is <pre>, which is used for preformatted text.

According to the W3C, you never put content directly inside <pre> — instead, you nest your content inside the appropriate element inside <pre>:

“The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements… To represent a block of computer code, the pre element can be used with a code element.”
W3C – Grouping Content: The pre element

Following this recommended syntax, I designed Cover’s style for <pre> to expand to the full width, setting the inside element — whatever it might be — to the standard column width.