<!DOCTYPE html>
    <html lang='en'>
    <head>
      <meta charset='UTF-8'>
      <meta http-equiv='X-UA-Compatible' content='IE=edge'>
      <meta name='viewport' content='width=device-width, initial-scale=1.0'>
      <title></title>
    
    <style>
    textarea {
      width: 96%;
      height: 250px;
    }
    </style>
    </head>
    <body>
      <textarea name="" id="source"></textarea>
      <select name="language" id="language">
        <option value="">Select Language</option>
        <option value="autohotkey">AHK</option>
        <option value="css">CSS</option>
        <option value="html">HTML</option>
        <option value="javascript">JS</option>
        <option value="php">PHP</option>
        <option value="react-jsx">React-JSX</option>
        <option value="sql">SQL</option>
      </select>
      <select name="theme" id="theme">
        <option value="">Select Theme</option>
        <option value="okaidia" data-js-css="prism.okaidia.min">Okaidia</option>
        <option value="tomorrow-night" data-js-css="prism.tomorrow-night.min">Tomorrow-Night</option>
        <option value="twilight" data-js-css="prism.twilight.min">Twilight</option>
      </select>
    
      <button id="process" onclick="process()">Process</button>
      <textarea name="processed" id="processed"></textarea>
      <textarea name="final_code" id="final_code"></textarea>
    
    <script>
    const theme = document.getElementById('theme');  
    const lang = document.getElementById('lang');
    const processed = document.getElementById('processed');
    const source = document.getElementById('source');
    
    function process() {
      processed.value = source.value.replaceAll("<", "<");
      // createCodeSnippet(theme, lang, js_css_tag, code)
    }
    function createCodeSnippet(theme, lang, js_css_tag, code) {
      
      let css_link = `<link rel="stylesheet" href="https://syntax.netcentrx.net/prism/css/${js_css_tag}.css">`;
      let code_snippet = `<pre><code class="language-${lang}">
                              ${processed}
                          </code></pre>`;
      let js_script = `<script src="https://syntax.netcentrx.net/prism/js/${js_css_tag}.js"></script>`;  
      document.getElementById('final_code').value = `${css_link}${code_snippet}${js_script}`;
    }
    </script>
    </body>
    </html>
replace-left-brackets.html