How to display HTML code in REACT webpage without affecting the styles?

Question

I was trying to display below code in REACT webpage but it not showing as code. its displaying as actual elements. how to display below button codes as code ?

<code>
<pre>
<Button className='btn-grv' variant="primary"  >Primary</Button> 
<Button className='btn-grv' variant="blue">Link</Button>
<Button className='btn-grv' variant="dark">Dark</Button>
  <Button className='btn-grv' variant="secondary">Secondary</Button>
  <Button className='btn-grv' variant="success">Success</Button>
  <Button className='btn-grv' variant="warning">Warning</Button>
  <Button className='btn-grv' variant="danger">Danger</Button> 
  <Button className='btn-grv' variant="info">Info</Button>
  <Button className='btn-grv' variant="light">Light</Button> 
</pre>
</code>

helle · Accepted Answer · 2022-03-14 10:48:35Z

2

You can use html special characters. Replace the < and > with < and >.

https://dev.w3.org/html5/html-author/charref

answered Mar 14, 2022 at 10:48

helle

11.8k9 gold badges58 silver badges86 bronze badges

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

Comments

justcasper · Accepted Answer · 2022-03-14 10:53:09Z

This Page will transform you Code to "special characters":

https://de.functions-online.com/htmlspecialchars.html

Result should be:

<code>
<pre>
&lt;Button className='btn-grv' variant=&quot;primary&quot;  &gt;Primary&lt;/Button&gt; 
&lt;Button className='btn-grv' variant=&quot;blue&quot;&gt;Link&lt;/Button&gt;
&lt;Button className='btn-grv' variant=&quot;dark&quot;&gt;Dark&lt;/Button&gt;
  &lt;Button className='btn-grv' variant=&quot;secondary&quot;&gt;Secondary&lt;/Button&gt;
  &lt;Button className='btn-grv' variant=&quot;success&quot;&gt;Success&lt;/Button&gt;
  &lt;Button className='btn-grv' variant=&quot;warning&quot;&gt;Warning&lt;/Button&gt;
  &lt;Button className='btn-grv' variant=&quot;danger&quot;&gt;Danger&lt;/Button&gt; 
  &lt;Button className='btn-grv' variant=&quot;info&quot;&gt;Info&lt;/Button&gt;
  &lt;Button className='btn-grv' variant=&quot;light&quot;&gt;Light&lt;/Button&gt; 
</pre>
</code>

Stefan · Accepted Answer · 2022-03-14 10:55:47Z

0

<code>
<pre>
&lt;Button className='btn-grv' variant="primary"  &gt;Primary&lt;/Button&gt; 
&lt;Button className='btn-grv' variant="blue"&gt;Link&lt;/Button>
&lt;Button className='btn-grv' variant="dark"&gt;Dark&lt;/Button>
  &lt;Button className='btn-grv' variant="secondary"&gt;Secondary&lt;/Button&gt;
  &lt;Button className='btn-grv' variant="success"&gt;Success&lt;/Button&gt;
  &lt;Button className='btn-grv' variant="warning"&gt;Warning&lt;/Button&gt;
  &lt;Button className='btn-grv' variant="danger"&gt;Danger&lt;/Button&gt; 
  &lt;Button className='btn-grv' variant="info"&gt;Info&lt;/Button&gt;
  &lt;Button className='btn-grv' variant="light"&gt;Light&lt;/Button&gt; 
</pre>
</code>

answered Mar 14, 2022 at 10:55

Stefan

1451 silver badge7 bronze badges

Comments

Alexander Bredun · Accepted Answer · 2022-03-14 10:56:44Z

or you can past it to pre as an inner text

  const i = document.querySelector('pre');
    i.innerText = `
        <Button className='btn-grv' variant="primary"  >Primary</Button>
        <Button className='btn-grv' variant="blue">Link</Button>
        <Button className='btn-grv' variant="dark">Dark</Button>
        <Button className='btn-grv' variant="secondary">Secondary</Button>
        <Button className='btn-grv' variant="success">Success</Button>
        <Button className='btn-grv' variant="warning">Warning</Button>
        <Button className='btn-grv' variant="danger">Danger</Button>
        <Button className='btn-grv' variant="info">Info</Button>
        <Button className='btn-grv' variant="light">Light</Button>
    `;

<code>
        <pre>

        </pre>
    </code>

Collectives™ on Stack Overflow

How to display HTML code in REACT webpage without affecting the styles?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related