Technical Document How to put code inside a paragraph

1

Hi
I’m trying to make a HTML document where I want the code inside the paragraph to show up as text.
I’ve tried using “<code> </code>” but nothing changes?

2

Yeah, that’s a tough one. The problem is that HTML sees the <h1> tag and wants to render it. One option is to use an escape char for the < so HTML doesn’t see it as a tag:

This is a test of <code>&lt;h1></code> and <code>&lt;/h1></code>. In the browser it should show up correctly.

There might be a more elegant solution, but I don’t know what it is.

3

I think there may be a problem with my setup. I’ve got over a hundred codes to program out. For some reason it works on the template for the assignment in the same Chrome browser?

4

I don’t understand what you are saying.

Yes, it’s going to work fine for a page dealing with JavaScript. An HTML parser isn’t looking for JavaScript to try to evaluate. An HTML parser is though looking for HTML to evaluate. So when you have something like <h1> in your HTML, the browser doesn’t care that it is wrapped in a code tag - it sees an h1 tag so it evaluates it as an h1 tag. Period.

The example page that you gave, sure, when you put:

function greetMe(yourName) {
  alert("Hello " + yourName);
}
greetMe("World");

inside HTML, it is fine because HTML has no idea what to do with that so it just renders it as text. You can wrap it in a code tag if you want for formatting. If you want the browser to evaluate it, it’s got to be wrapped in a script tag.

But you are not writing JS, you are writing HTML so you have to make sure the the browser doesn’t recognize what you are writing as HTML. I gave you a method to do that.

5

Thanks I see exactly what you’re saying

6

Happy I found this but I’ve run across the same issue but I’m wondering if a more elegant or efficient solution was ever found. I’m hoping to make a Technical Doc Page with quite a few code elements.

I’ll keep searching the forum…

Gracias,
Ohia

7

@Ohia.Bruja

Here is an article I found on Stack Overflow with two methods for properly displaying HTML code on a webpage written in HTML.

This:

In HTML, the only solution guaranteed to work everywhere is to escape the code ( < and & as &lt; and &amp; , respectively) manually.

As well as:

The tried and true method for HTML:

  1. Replace the & character with &amp;
  2. Replace the < character with &lt;
  3. Replace the > character with &gt;
  4. Optionally surround your HTML sample with <pre> and/or <code> tags.
1 Like