Javascript to html replace tags not working

[Peter_30]

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 <pre><code></code></pre>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

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'>&lt;"+contents+"&gt;</span>";
  }  
  );

  text = text.replace(/\"([^\"]+?)\"/g, function(match, contents){
      return '<span class="StringColor">&quot;'+contents+'&quot;</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">&#123;</span>';
  }
  );
  text = text.replace(/\}/g, function(match, contents){
      return '<span class="BracketsColor">&#125;</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(/</g,'&lt;');
    var text=text.replace(/>/g,'&gt;');
    $(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
        };
    }]);

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-&gt;prepare($query);
        $stmt-&gt;execute($params);
        </code></pre>