How to create a code block that won't interprete html

How to create a code block that won't interprete html
0

Tell us what’s happening:

I woud like to create a code block in which the html code i put in doesn’t get interpreted.

Your code so far
https://codepen.io/lucollym/pen/vYNPGJK
What you want to recreate
https://reactjs.org/docs/add-react-to-a-website.html#add-react-in-one-minute

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0.

Challenge: Build a Technical Documentation Page

Link to the challenge:

you need to put the symbol code, so for example &lt; for a “<”, in this way it is not interpreted as code

2 Likes

Thanks. That only will work with greater than and less than. I thought there was somethign like <blockquote> that will enclose the code, and any tag wrote in it, wouldn’t be interpreted as thml tags. for example, the documentation page i left for React in which you see the code in a block being displayed. However, thanks for the suggestion. I can work a way around what I want to make with the info you gave me until I stumble with a better solution!

@ieahleen’s solution is the best solution. There is no HTML tag that does what you want. If you don’t want the less than and greater than characters to be interpreted as tags then you have to replace them with &lt; and &gt;.

There used to be an <xmp> tag that did this but is has long since been deprecated and should not be used.

There is a JS workaround. You can set the textContent property:

<code id="code"></code>
<script>
  document.getElementById('code').textContent = '<p>test</p>';
</script>
1 Like

Then it takes lots of coding just to write a simple block of code explaining settings or stuff with code. I was able to find the tag <pre> which in this case, it is used for code that has no tags. For example,

 body{
background-color:red;
}
if there was something for html not to be interpreted, would save me lot’s of time!. Thanks for the help!

There are only three characters you need to translate:

  1. less than: &lt;
  2. greater than: &gt;
  3. ampersand: &amp;

I would not consider that ‘lots of coding’.