Explication of syntax not functioning

Following the instructions provided here but encountering issues, any assistance?

<script type="text/javascript" src="sh/src/shCore.js"></script>

<script type="text/javascript" src="sh/scripts/shBrushJScript.js"></script>

<link href="sh/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="sh/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

<pre class="brush: js">
    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }
</pre>
<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

Encountered errors in the console, unsure how to proceed.

Uncaught ReferenceError: XRegExp is not defined shCore.js:123 Uncaught TypeError: Cannot read property 'Highlighter' of undefined shBrushJScript.js:45 Uncaught TypeError: Cannot read property 'all' of undefined test.php:21 Attr.specified is deprecated. Its value is always true.

Answer №1

Check out this useful LINK

Make sure to store all your syntax highlighter local files in the same directory like so:

<script type="text/javascript" src="sh/src/shCore.js"></script>

<script type="text/javascript" src="sh/src/shBrushJScript.js"></script>

OR

<script type="text/javascript" src="sh/scripts/shCore.js"></script>

<script type="text/javascript" src="sh/scripts/shBrushJScript.js"></script>

Answer №2

I decided to create a basic html site to troubleshoot your issue, and it seems to be working fine for me:

<html>
<head>
    <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
    <link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <pre class="brush: js">
    /**
    * SyntaxHighlighter
    */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }
    </pre>
    <script type="text/javascript">
        SyntaxHighlighter.all()
    </script>
</body>
</html>

Based on my test, it seems like you might be experiencing a referencing issue with the local files in the <script> tag. I recommend trying again with the remote files provided by the script's author. Have you tried that? Did it fix the problem?

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

Can the garbage collector in Typescript/JavaScript effectively handle circular references, or does it result in memory leaks?

When working in languages such as C#, managing memory is not a problem. However, this can lead to difficult-to-find memory bugs in other languages. Is it safe to use the following code snippet in Typescript or Javascript without encountering any issues? c ...

Issue: The content of the text does not align with the HTML generated by the server

I'm struggling with an algorithm in next.js and encountering hydration errors. Here is the code I am using: import numbers from "../../functions/numberGenerators.js" export default function test() { ...

Obtain the identifier for a single button within a collection of buttons in an HTML form using Django

I've incorporated Django as the framework for a tracking platform, utilizing it as an FSM. At this juncture, I aim to enable users to modify the machine's state. The state is denoted by a django-fsm field, essentially a CharField integrated with ...

The mobile page is refusing to scroll, causing all the text to bunch up at the top of the screen

After learning HTML/CSS/Js/PhP over a few months, I recently completed my first website. I am facing an issue with one of the pages on my website when viewed on a mobile device. The parallax scrolling header image does not scroll either horizontally or ve ...

I am facing difficulties with invoking the popOpen() function within my parameters in JS, HTML, and CSS

I'm currently facing an issue with my code. I am attempting to invoke my openPop() function with the input parameter 'pop' within some of my sensor code, but no pop-up is appearing even though I believe I am calling the popup correctly. If a ...

Substitute a single occurrence of the dollar sign with an HTML tag

I have been attempting to insert an HTML tag into a price on my e-commerce website. Specifically, I am looking to add a tag between the "$" and the numerical value (e.g. $5.00), but I am unable to locate the core file where I can place the code between the ...

The Selenium python tool is reporting that the element at coordinates (X, Y) is not clickable, as another element is blocking it from receiving the click. It's important to note that

Here is a link to an online store that I need to extract information from. Specifically, I am looking to access the Most Helpful, positive, negative, most recent, and certified buyers' sections in order to scrape the values within them. Unfortunately, ...

Determine whether an array is void, then proceed to deactivate a button

I am attempting to prevent a button from being clickable if an array is empty, but I am encountering difficulties. <button [disabled]="(users.length ==0 )?true:false">Send mass emails</button> Within the TypeScript file: users: UsersModel[]; ...

Having trouble getting routing to function properly with react-router-dom

I'm currently assisting a friend with completing a React Project. I'm facing an issue while trying to set up routing using react-router-dom. The components inside the <switch> tag are not functioning properly. Below are snippets of my code: ...

Struggling to display the preloader animation while waiting for the render.com server to start up (using the free tier web service)

My choice for deploying dynamic websites is render.com and I am currently using their free tier. The issue with this free service is that Render spins down the web service after 15 minutes of inactivity, resulting in a delay when it needs to spin back up u ...

What is the process for applying cdkDropList to the tbody when using mat-table instead of a traditional HTML table?

I have been experimenting with the mat-table component in my Angular project, following a simple example from the documentation: <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <!--- These columns can be ...

Updating the id token in VueJs using Axios interceptor when it expires

I need to implement an axios interceptor that will add the idToken as an authorization header to every axios call, and also refresh the idToken if it has expired before making any call. My current code for this task is as follows: axios.interceptors.requ ...

A comprehensive guide to navigating pages using AngularJS

Greetings! I've recently embarked on my Angular JS learning journey and have encountered an issue with loading content from pages. Unfortunately, I am not able to receive any content. Below are snippets of my index file and corresponding JavaScript co ...

Guide to automatically loading a default child route in Angular 1.5 using ui-router

Hello, I am looking to set a default child route to load as soon as the page loads. Below is the code snippet: $stateProvider.state('userlist', { url: '/users', component: 'users', data:{"name":"abhi"}, resolv ...

Guide to interacting with the Li element using JavaScript in Selenium

Is there a way to click on the item inside the li element using a Selenium script with JavaScript? I've tried different methods like By.cssSelector or by css, but I keep getting an ElementClickInterceptedError: element click intercepted:Other element ...

Creating a unique custom bottom position for the popover and ensuring it is fixed while allowing it to expand

Creating a customized popover similar to Bootstrap's popover, I have successfully implemented popovers in all directions except for the top direction. My challenge lies in fixing the popover at the bottom just above the button that triggers it, and en ...

The type does not contain a property named `sort`

"The error message 'Property sort does not exist on type (and then shoes4men | shoes4women | shoes4kids)' pops up when attempting to use category.sort(). I find it puzzling since I can successfully work with count and add a thousand separato ...

Is there a way for a Vue component to interact with a button or checkbox in order to dynamically update tooltip content and button style using a function?

Is it possible for a Vue component to trigger button clicks or checkbox checks in order to update tooltip text and button color using a function? Despite the presence of a handle() function in the code provided, these changes are not currently taking effec ...

Tips for identifying and swapping values/parameters in a URL during redirect

To provide more clarity on my inquiry, I will outline the details below: There are three links: Link A, Link B, and Link C Link A: {c_val} Link B: {id} Link C: In the database, there is a value adgaf7g6adf6gadfg8a86fgs9f6g The main focus here is when ...

Why won't my AngularJS Google Maps marker trigger any events?

My issue is with the marker event not working on a UI Google Map. I am using this link. Here is my view setup: <ui-gmap-markers models="mapResult" fit="true" idkey="mapResult.id" coords="'form_geo'" click="'onclick'" events="mapRe ...