Having trouble getting JavaScript to replace tags in HTML

I've been working hard to replace all the shared code in posts on my website, but I'm having trouble getting it to work. I want everything inside

<pre><code></code></pre>
tags to be colorized using CSS. Here's a sample of the code I've been trying to use:

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

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

  // Additional code snippets here...

And this is how the code appears on 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>

Answer №1

You might want to consider looking at this site that offers color themes for Google Code Prettify, which is exactly what you're looking for.

This tool makes use of Googles's Code Prettifier: Check it out here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to save information from an ng-repeat loop into a variable before sending it to an API?

My goal is to store the selected value from ng-repeat in UI (user selection from dropdown) and assign it to a variable. function saveSelection() { console.log('inside function') var postToDatabase = []; vm.newApplicant.values ...

Ensuring all fetch requests are completed successfully before dispatching an action in React-Redux

I'm currently developing a React application and utilizing Redux to manage the state. Here is a snippet of the code: category-arrows.component.jsx: import React, { Component } from 'react'; import { connect } from 'react-redux'; i ...

The circular reference error in Typescript occurs when a class extends a value that is either undefined, not a constructor,

Let me begin by sharing some context: I am currently employed at a company where I have taken over the codebase. To better understand the issue, I decided to replicate it in a new nestjs project, which involves 4 entities (for demonstration purposes only). ...

Issue with border spacing functionality

I'm having some difficulty with my border spacing in CSS. No matter what size I specify, it doesn't seem to have any effect. I just want to use a border for the top line. Here is my CSS: p { border-spacing: 5000px; text-align: right; ...

Allowing an empty string in the option field should be displayed

I have a regular expression for validating URLs, but I am facing an issue where the field is optional. Currently, even if no URL is entered, the validation still occurs. I want the validation to only happen if the user enters a URL, otherwise it should acc ...

I am unable to enter any text in an angular modal

Currently, I am facing an issue where I am unable to click on the search input field within a modal. The goal is to implement a search functionality in a table displayed inside a modal window. The idea is to have a list of hospitals where users can view d ...

The ng-click event in AngularJS does not function as expected when nested within another ng-repeat loop

I am facing an issue with ng-click in my Angular application (version 1.0.4). The first ng-click works fine, but the second one does not. <div class="menu-group" ng-repeat="module in modules"> <div ng-click="toggle($event, $parent)" ...

Issue with Vue2's v-text functionality

Recently, I've delved into Vue2 and encountered a problem with form submission and validation on a single page. The issue lies in the error display process – I want errors to be shown beneath each form input as soon as they occur, rather than waitin ...

The readyState of Ajax is consistently anything but 4

I have encountered an issue with my JavaScript code. I am running these codes in order to display data based on user input. Despite there being no error connection and the connection happening properly, whenever I enter a name it always goes into the else ...

Utilizing React's useState to store data in local storage

I am trying to figure out how to save data from a photos database API into local storage using the useState hook in React. Despite my attempts, I have not been successful with the useState method as the data in local storage gets cleared upon page refres ...

What could be the reason for the image not displaying properly in a React application?

Why isn't the image appearing as a background in the container with text on top? What am I doing wrong here? <div className="container-fluid"> <div className="col-md-12 col-sm-12 col-xs-12 bgContainer matchingTalent"> ...

When typing in the textarea, pressing the return key to create a line break does not function as expected

Whenever I hit the return key to create a new line in my post, it seems to automatically ignore it. For example, if I type 'a' press 'return' and then 'b', it displays 'ab' instead of 'a b'. How can I fi ...

Receiving an error while trying to install packages from the NPM registry due to non

I am facing some challenges while attempting to install my Ionic App through the registry along with its dependencies. I have been using npm i --loglevel verbose command, and my ~/.npmrc file is configured as follows: //nexus.OMMITED.com/repository/:_auth ...

Unable to `.catch()` an error while utilizing Jquery.ajax().then()

My current project involves making calls to various APIs using JQuery and caching the response from each API. This cached data is then used multiple times on the page to create different dashboard widgets. The issue I'm facing is that if an API retur ...

What is the best way to display information using axios.get?

I am currently working on a small project with PHP and Axios. I am attempting to display data in an HTML table using the v-for directive, but I am facing issues as I receive server feedback. Although I am able to retrieve the JSON response successfully, wh ...

Toggle the visibility of a div based on whether or not certain fields have been filled

Having a form with a repeater field... <table class="dokan-table"> <tfoot> <tr> <th colspan="3"> <?php $file = [ 'file' => ...

Having issues making div elements with javascript

I am having trouble generating new divs when a specific div is clicked. Despite my efforts, nothing seems to be happening and the console isn't showing any errors. I've searched online for solutions but haven't found anything that addresses ...

`Inconsistencies between Postman and AngularJS service responses`

When I make a call to the endpoint using Postman, I receive this response: https://i.stack.imgur.com/pH31G.png However, when I make the same request from my AngularJS service defined below: this.login = function (loginInfo) { return $http({ ...

Shrink Font-Awesome icon sizes using a Node.js and Express.js web application

Currently, I am in the process of developing a website using node.js + express.js and implementing font-awesome for icons. The local hosting of Font-awesome has resulted in a 1.2 MB JS file [font-awesome.js], even though we are only utilizing 10-15 icons. ...

Set up an event listener for a specific class within the cells of a table

After spending the last couple of days immersed in various web development resources, I find myself stuck on a particular issue. As someone new to this field, the learning curve is quite steep... Let's take a look at a single row in my project: < ...