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>

CodePudding user response：

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

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

CodePudding user response：

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>

CodePudding user response：

<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>

CodePudding user response：

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>