What is the process for loading Syntax Highlighter on pages with pre tags?

As a Blogger, I often find myself in need of demonstrating codes on my blog. To achieve this, I have been using a Syntax Highlighter developed by Alex Gorbatchev. However, a recurring issue I face is that the files load on every single page of my blog, causing it to load slowly.

Since I only have codes on certain pages, I am looking for a solution to load the SyntaxHighlighter files only on pages containing a specific tag. If anyone knows how to accomplish this, I would greatly appreciate your help.

I have tried searching on StackOverflow for a solution to this problem but unfortunately, I have not found any threads that address my specific issue.

javascriptsyntaxhighlighter

Answer №1

If you happen to be using jQuery and requirejs in your project, you might consider implementing something similar to the following:

var preElements = $('.pre');
if (preElements.length > 0)
{
    // Load the necessary JS files
    require(['shCore.js', 'shBrushJScript.js'], function (){
      // Apply the syntax highlighting
      SyntaxHighlighter.all()
    });
}

Just ensure that your logic doesn't inadvertently apply the same script multiple times.

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

Problem with ngStyle: Error indicating that the expected '}' is missing

I encountered an error in the Chrome console when trying to interpret the code below: <div [ngStyle]="{'width': '100%'; 'height': '100%'; 'background-size': 'cover'; 'background-repeat&ap ...

javascripthtmlcssangulartypescript

Is there a workaround for retrieving a value when using .css('top') in IE and Safari, which defaults to 'auto' if no explicit top value is set?

My [element] is positioned absolutely with a left property set to -9999px in the CSS. The top property has not been set intentionally to keep the element in the DOM but out of the document flow. Upon calling [element].css('top') in jQuery, Firef ...

javascriptjquerycss

Developing desktop applications using C# scripting

I currently have a C# desktop program that is able to work with new C# plugins. My goal is to modify the existing C# application to allow for scripts to be used as plugins. These scripts could be in JavaScript, Windows Script Host (WSh), or any other form ...

c#javascriptwsh

Is there a way to use Javascript or JQuery to conceal all unchecked items in a RadioButtonList?

Currently, I am utilizing the Asp .net repeater to bind the selected value in the RadioButton list. Here is an example snippet: <asp:RadioButtonList ID="RadioButtonList1" runat="server" SelectedValue='<%# Eval("Numbers& ...

javascriptjqueryasp.net

Leveraging a JSON file as a data repository for chart.js

I am struggling to incorporate JSON values into a bar chart. I have successfully logged the JSON data in the console, but I'm unsure how to include it in the data property for the chart. Below is the source JSON... {time: "2016-07-03T21:29:57.987Z" ...

javascriptjqueryjsoncharts

What causes the element to load with a transparent appearance? And why is my JavaScript code overriding the hover effect on it?

My goal is to have an element fade out when clicked and then fade back in when its space is clicked again. I also want the opacity of the element to be 0.9 instead of 1 when visible. I've encountered two issues with my code. First, the hover selector ...

javascriptcss

Is there a way to automatically update the input value when I refresh the page following a click event?

Currently, I have multiple p elements that trigger the redo function upon being clicked. When a p element is clicked, the quest[q] template is loaded onto the .form div. These templates are essentially previously submitted forms that sent values to an obj ...

javascriptjqueryhtmlformshandlebars.js

Leveraging AJAX for database variable checks and PHP and JavaScript to redirect to specific pages based on the results

I am currently exploring the use of AJAX to validate variables in a database. The goal is to redirect to a specific page if the validation is successful. However, during this testing phase, I am not actually checking any variables. My focus is on verifying ...

javascriptphpjqueryajax

Can you save data entered by a user into a text file using JavaScript or a similar technology in HTML, without the need to send it to a server?

Is there a way to create a site where user data is inputted into an input box or form, and then that information is stored in a .txt file on the user's C drive without uploading it to a server first? I've been experimenting with various forms an ...

javascriptphphtml

What is preventing us from assigning the jquery selector object to a different object's property for later use?

I'm facing an issue in the code below where I am trying to assign a jQuery selector object to another object property but it's not functioning as expected. Can you help me identify what mistake I might be making? index.html <html lang="en"&g ...

javascriptjquery

Guide to tallying the occurrences of a specific key within an object array and attaching the count to each key's current value

Is there a way to determine the number of occurrences of the 'value' key within an object that is part of an array, and then add the count to each value if applicable? In this case, 'a' represents the original data var a = [ { id: ...

javascriptreactjsvue.jslodashunderscore.js

React Native - Issue with array value not reflecting in Text component

import React, {useState} from 'react'; import { FlatList, Text, View} from 'react-native'; import {styles, styleBox} from './components/styles'; import Slider from '@react-native-community/slider'; export default fu ...

javascriptarraysreactjsnative

Incorporate the module into both the parent and child class

In my coding project, I have a situation where both a parent class and a child class are importing the same lodash library. This raises the question: will the final bundled JavaScript file contain duplicate lodash code? //Parent Class import Component fro ...

javascriptreactjswebpackecmascript-6es6-modules

Understanding the extent of variables in Javascript

I'm struggling to comprehend the scope of 'this' in this particular situation. I can easily call each of these functions like: this.startTracking(); from within the time tracker switch object. However, when attempting to execute the code: Dr ...

javascriptjqueryajaxdrupal

The act of transmitting data via a timer using JS WebRTC leads to crashes if the page is reloaded before

In one of my server.js files served by a node, I have written the following code snippet: function multiStep(myConnection, data) { var i=0; var myTimer=setInterval(function() { if (i<data.length){ var element=JSON.string ...

javascriptnode.jstimerwebrtc

I'm confused why this particular method within a class is not being inherited by the next class. Rather than seeing the expected extension, I am presented with - [Function (

Working fine with the Person class, the register() function displays the correct return statement when logged in the console. However, upon extending it to the Employee class, instead of the expected return statement, the console logs show [Function (anon ...

javascripttypescripttypescript-class

The provider for authentication, which is linked to the AuthenticationService and subsequently to the loginControl, is currently unidentified

Attempting to implement an authentication service in my application, I encountered an error when trying to call it within my controller: !JavaScript ERROR: [$injector:unpr] Unknown provider: AuthenticationServiceProvider <- AuthenticationService <- ...

javascriptangularjs

Exploring the world of Vue.js object mapping

I currently have the following object: data: () => ({ customer: { item: { name: undefined }} }) This object is being used in the template as follows: <v-number separator="." decimal="2" ...

javascriptvue.jsobjecttemplates

Guide to displaying or concealing the header using PHP

Once the add button is clicked, the text should be hidden and the form should be displayed. Check out my code below: <h2 style="font-size: 2em; margin-bottom: 0.75em; margin-left: -1%;">Specify Co-Owners for self occupied property</h2> <div ...

javascriptjqueryhtml

What steps can I take to set up AJAX-based long-polling in Microsoft Edge?

I have been working on setting up a basic long-polling skeleton that functions across different browsers. While my solution works perfectly in Chrome, I am facing difficulties getting it to work in Edge. Upon loading the page in Edge, there are no visible ...

javascriptjqueryajaxinternet-explorerlong-polling