React explicitly don't render component inside html <code>

Question

How can I render a component inside a HTML <code> element just as a text?

<code>
  <DesktopHeader>
    <a href="/projects">Projects</a>
  </DesktopHeader>
</code>

In my situation it renders my component again but I want to use it inside a documentation to just show how to pass props to a component.

Answer 1

This is not a perfect matchup for what you intend to do but you can escape your markups with &lt; for < , &gt; for > , &quot; for " (quotes), and also &nbsp; for (spaces).

So it will become something like this:

 <code> &lt;DesktopHeader&gt;<br/> &nbsp;&nbsp;&lt;a href=&quot;/projects&quot;&gt;Projects&lt;/a&gt;<br/> &lt;/DesktopHeader&gt; </code>

NOTE: Generally every character with an UTF-8 code above 127 is not interchangeable between the "normal" Western ISO-8859-1 encoding and UTF-8. But to creating HTML markups knowing these three ( < , > ,   , and " ) would be enough. I'm also found a link that can be useful for generating markups automatically.