How to add text code to a web page?

Question

I know that this is possible because this site does this, but I tried to research how I just got a bunch of garbage, so how to add tags to a paragraph in a site without a browser, interpreting it as code.

For example, if I have <p><div></div></p> , I want the div to appear in the browser, since the text did not interpret the browser as html. Is it hard to do?

I wrote textbooks for the school, and it would be much easier if I could add the code directly to the web page in text form instead of images so that students can copy and paste it.

Answer 1

See how this site itself achieves this:

 <p>For example, if I have <code>&lt;p&gt;&lt;div&gt;&lt;/div&gt;&lt;/p&gt;</code>, I want the div to display in the browser as text not have the browser interpret it as html. Is this complicated to do?</p> 

You need to replace <and> with their HTML character objects.

Answer 2

There are many ways to use:

• Replace < with <

   `<h1>This is heading </small></h1>` 

• Put the code inside the tags </xmp><xmp>

   <xmp> <ul> <li>Coffee</li> <li>Tea</li> </ul> </xmp> 

I do not recommend other methods because they do not work in all browsers such as <plaintext> or <listing> .

Answer 3

You want to look at what is called HTML Entities .

If you want the < symbol to appear on a website, for example, you can write this HTML code: < . These are the five main HTML Entities and their source code equivalents:

 < &lt; > &gt; " &quot; ' &apos; & &amp; 

If you use a programming language (for example, PHP or ASP.NET), then there is probably a built-in command that will do the conversion for you ( htmlspecialchars() and Server.HtmlEncode , respectively).

Answer 4

To add plain text code to a web page, we need to escape HTML characters for these five characters in our text:

< as &lt;
> as &gt;
& as &amp;
' as &apos;
" as &quot;

(OR)

We can directly use <xmp> for example:

 <xmp>Code with HTML Tags like <div> etc. </xmp> 

<xmp> tag is out of style and is deprecated.

Answer 5

Use the <PRE> before the block of reformatted text and </PRE> after. The text between these tags appears as monospaced characters with line breaks and spaces at the same points as in the source file. This can be useful for rendering poetry without adding a lot of HTML code. Try it:

  Mary had a little lamb.  His fleece was snow white.
 And wherever Mary the lamb must have gone.

Answer 6

Use an html / special tag character, such as < (less)

 &lt;p&gt; in html -> <p> in browser 

You can also write <p> since there is no ambiguity regarding an open tag.

Many languages ​​are built into methods for converting special HTML characters such as php htmlspecialchars

Answer 7

You need to avoid HTML tags, namely the sign is less than the sign. Write it as < and it will appear as <on the HTML page.

Answer 8

Your html should not be in tags. If you use <> tags, you should convert it to code, not text, if I had to write <br> in the middle of the sentence, then it will do it. You will need to write code in the code to speak using <> (< >) and then you will get what you need.

Answer 9

You can also look at the syntax shortcut, depending on how often you need to embed uninterpreted code on your web page. Below is one of the most popular:

http://alexgorbatchev.com/SyntaxHighlighter/

Answer 10

The easiest way to do this without having to reformat the text using entities is to use jQuery.

 <div id="container"></div> <script> $('#container').text("<div><h1>Hello!</h1><p>I like you.</p></div>"); </script> 

If you then run alert($('#container').prop('innerHTML')); , you will get <div><h1>Hello!</h1><p>I like you.</p></div>

How useful this method is depends on where your material comes from.

Answer 11

Use iframe and txt files: <iframe src="html.txt"></iframe>

Answer 12

I just discovered a much simpler solution in CSS-Tricks ... It's just that your outer shell is a pre tag and then a code tag, and we put your code in a paranthesis inside the code tag.