Javascript to HTML replace tags not working

See more:

Javascript

HTML

jQuery

I have been working on this to replace every code that is shared on post in my website but is not working for me.
I need everything that appear inside `

<code></code>

` to replay all the tags and give it a color using css. please if there is any simple way to do this can someone just help me with that? i will appreciate sample code in jsfiled


And here is how codes display in my website

<pre id="Mpreditor" class="code code-codes language-javascript">
    <code ng-transclude="ng-transclude" class="language-javascript">    
    <span>Hello</span>
    You have to include the `%` signs in the `$params`, not in the query:
    
    $query = "SELECT * FROM tbl WHERE address LIKE ? OR address LIKE ?";
    $params = array("%$var1%", "%$var2%");
    $stmt = $handle->prepare($query);
    $stmt->execute($params);
    </code>
</pre>

What I have tried:

here is sample of code that i have been trying to use

function Rep(text){
    text = text.replace(/ /g," ");

    text = text.replace(/<([^\>]+?)>/g, function(match, contents){
        return "<span class="TagColor"><"+contents+"></span>";
    }
    );

    text = text.replace(/\"([^\"]+?)\"/g, function(match, contents){
        return '<span class="StringColor">"'+contents+'"</span>';
      }
    );
    text = text.replace(/\(([^\)]+?)\)/g, function(match, contents){
        return '<span class="OptionsColor">('+contents+')</span>';
      }
    );
    text = text.replace(/\n/g, function(match, contents){
        return '<br />';
    }
    );
    text = text.replace(/\{/g, function(match, contents){
        return '<span class="BracketsColor">{</span>';
    }
    );
    text = text.replace(/\}/g, function(match, contents){
        return '<span class="BracketsColor">}</span>';
    }
    );
    text = text.replace(/\/\*([^\*]+?)\*\//g, function(match, contents){
        return '<span class="CommentColor">/*"+contents+"*/</span>';
    }
    );
      text = text.replace(/\[\](.*?)\[\/\]/g, function(match, contents){
        return '<span class="BBColor">'+contents+'</span>';
    }
    );
    return text;

  }

  //HTML replace
  //==================================================
  $('code').each(function(){
      var text=$(this).html().replace(/       var text=text.replace(/>/g,'>');
      $(this).html(text);
  });

  //google-code-prettify
  //==================================================
  jQuery(window).load(function(){
      prettyPrint();
  });

  //Still on Text format

  var app = angular.module('codelab',[],['$interpolateProvider',
      function($interpolateProvider) {
          $interpolateProvider.startSymbol('[[');
          $interpolateProvider.endSymbol(']]');
          }]);

  app.directive('ngPrism',['$interpolate', function ($interpolate) {
          "use strict";
          return {
            restrict: 'E',
            template: '<pre id="Mpreditor" class="code code-codes language-javascript"><code ng-transclude="ng-transclude" class="language-javascript"> </code></pre>',
            replace:true,
            transclude:true
          };
      }]);