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.

I am rendering a component and underneath I want to show the code for the component. Like it's done with Storybook JS. — mrks
– mrks, Commented Jun 21, 2020 at 18:52
You could use images like this instead though I don't know if thats what you're looking for carbon.now.sh — Talmacel Marian Silviu
– Talmacel Marian Silviu, Commented Jun 21, 2020 at 18:53

SMAKSS · Accepted Answer · 2020-06-21 19:18:57Z

4

This is not a perfect matchup for what you intend to do but you can escape your markups with < for <, > for >, " for " (quotes), and also   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.

edited Jun 21, 2020 at 19:18

answered Jun 21, 2020 at 18:59

SMAKSS

10.6k3 gold badges26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related