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.
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.
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.
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 <
and >
, like this:
<!-- inline -->
<p>This code is <code><em>inline</em></code>.</p>
<!-- code block -->
<pre><code><div>
This is a block.
</div></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
Thanks for the info. Too bad because <xmp>
was really easy to use. I am playing around the the <
and >
but haven’t been able to make it work for my block of text yet.