在<pre> <code> element

Question

This question is specific for SVG code :

Is there a way to display an svgas code inside a simple html page with only basic htmland css without any external libraries ?

I tried the simple way :

<pre>
    <code contenteditable spellcheck="false">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128">
    </code>
  </pre>

but it basically draws and empty svg box 128x128px ..

It works if I break the SVG tag with any character:

<.svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128">

or even space

< svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128">

( Fiddle demo here )

is there a simple way of showing the svg code without breaking it and without the use of any syntax-highlighter-library-javasctipt-thingie-markdown ? or is it more simple and just my browser does not support it ?

edit I :

I can actually accept some one-liner JS solution if nothing else exists - but because it is a one-time thing, a bloated library seems too much..

edit II :

It can work with an <xmp> tag, but I would like to know if there is some way to do that with the simple <pre> and <code> for svg ..