<code> element - technical documentation

Hello, I am trying to display some code as text for the technical documentation. I want to display this code:

<!DOCTYPE html>
<title>Page Title</title>

<h1>My First Heading</h1>
<p>My first paragraph.</p>


I am using codepen and my output shows the output of the code, not the code itself. Am I doing something wrong or can this not be done with codepen maybe?


Would be better if you share the link to your codepen.

I would make sure you are writing in HTML section. (There are 3 sections, html, css and javascript).

Also try stripping off everything outside of h1 and p since doctype, html, head and body are already included automatically in codepens.


I got it to work. I used <xmp> tag instead of <code> tag.

I need to use code tag 5 times on page also so will need to find a use for that.

I’d never heard of <xmp> before, interesting find.

MDN lists it as “obsolete” and not included in the HTML5 spec, so I wouldn’t recommend relying on it or using it in projects. The spec-compliant way of doing this is using the HTML entities &lt; and &gt;, like this:

<!-- inline -->
<p>This code is <code>&lt;em&gt;inline&lt;/em&gt;</code>.</p>

<!-- code block -->
  This is a block.

The above renders as follows:

This code is <em>inline</em>.

  This is a block.

Hand-coding this way is a pain, but typically when writing content, you’d be using an authoring tool that would handle this all for you behind the scenes (e.g. using a WYSIWIG editor provided by your CMS). You could also just run the text through a simple JavaScript function to convert it for you — in fact, fCC has one JavaScript challenge that covers exactly this task.

1 Like

Thanks for the info. Too bad because <xmp> was really easy to use. I am playing around the the &lt; and &gt; but haven’t been able to make it work for my block of text yet.