Prism code rendering and JSX markdown not working on static HTML page

I have been trying to implement prism on a static HTML page to show code blocks for a basic skills portfolio site. I have imported Prism into the relevant places on the page in a script tag and in a CSS link tag. I also did the required

<pre>
    <code class="language-jsx">  
     
    </code>
  </pre>

In the browser I'm getting the beige background of the code block rendered and the js is being high-lighted as Prism is supposed to do.

However the jsx markdown that is to be returned by the code is being taken as HTML by the browser. I have seen the part of the Prism website that discusses the rendering of HTML and I do get that jsx is in reality HTML markup but I would have thought that Prism is a way round this issue.

const SomeReactComponent = (props) => {
             return(
                <ThisWontRender />
             )
           }

What I'm trying to avoid is having to escape the HTML with & lt;

Have I missed something?