Javascript html заменить теги не работают

Question

Я работаю над этим, чтобы заменить каждый код, который используется для публикации на моем сайте, но не работает для меня. Мне нужно все, что появляется в <pre><code></code></pre> воспроизвести все теги и придать ему цвет с помощью CSS здесь приведен пример кода, который я пытался использовать

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 
     }; 
    }]); 

А вот как коды отображаются на моем сайте

<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> 

Answer 1

Вы должны изучить https://jmblog.github.io/color-themes-for-google-code-prettify/, который в основном делает именно то, что вы просите.

Используется код ошибки в Google Код: https://github.com/google/code-prettify