<code> element - technical documentation

HTML-CSS
1

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

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

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

</body>
</html>

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?

Thanks.

2

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.

3

https://codepen.io/danh4648/pen/YozMPQ

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.

4

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 -->
<pre><code>&lt;div&gt;
  This is a block.
&lt;/div&gt;</code></pre>

The above renders as follows:

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

<div>
  This is a block.
</div>

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
5

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.