Why is prisim.js not formatin my new code?

I am trying to build an app where I can store my code as a cheat sheet. I am using prisim.js to format the HTML.

The app works like this, the user writes the code in a text area and when they press submit, a new element gets added to the DOM with its respective classes that prisim.js use but for some reason, it’s not formating the code correctly.

<div class="cont">
    <div class="sub-cont">
      <h1 class="title">Code Snippet!</h1>
      <h3 class="title" for='tite-input'>Title</h3>
      <input id='tite-input'class='tite-input' type="text">
      <textarea name="codeText" id="code" cols="30" rows="10"></textarea>
      <button class="btn">Submit</button>
    </div>

<div class="code-cont">

      <div class="code-inner">
        <h3 class="code-title">Center a div</h3>
        <pre>
          <code class='language-css'>
                  Img {
                    background: url("link");
                    background-size: cover;
                    background-position-x: center;
                    background-position-y: center;
                    background-repeat: no-repeat;
                  }   
          </code>
        </pre>
        <button class="edit-btn">Edit</button>
        <button class="delete-btn">Delete</button>
      </div>

// DOM variables
let titleInput = document.querySelector('.tite-input').addEventListener('input', getTitleInputValue);

let textArea = document.querySelector('textarea').addEventListener('input', getTextAreaValue);

let submitBtn = document.querySelector('.btn').addEventListener('click', submitButton);

// values
let titleInputValue,
    textAreaValaue;


function getTitleInputValue(){
  titleInputValue = this.value
  console.log(titleInputValue)
}

function getTextAreaValue(){
  textAreaValaue = this.value;
  console.log(textAreaValaue)
}


function submitButton(){

  let codeCont = document.querySelector('.code-cont')
  let html = `
      <div class="code-inner">
        <h3 class="code-title">${titleInputValue}</h3>
        <div class="code-toolbar">
          <pre class='language-javascript' tabindex="0">
            <code class='language-css'>
                ${textAreaValaue}
            </code>
          </pre>
        </div>
        <button class="edit-btn">Edit</button>
        <button class="delete-btn">Delete</button>
      </div>`;

      // codeCont.appendChild(html[0])
    console.log(  codeCont)

    codeCont.insertAdjacentHTML("beforeend", html);




}