SyntaxHighlighter unreliable and not working on mobile

Question

I've started to use SyntaxHighlighter for my syntax highlighting needs.

However, I've realized that it doesn't work on mobile. Similarly, it often doesn't work on desktop browsers, but sometimes it does.

It often defaults back to the <pre> styles because SyntaxHighlighter doesn't transform the <pre> into its own styled <div>:

But sometimes it does what it's supposed to do:

(You can see this effect at my website, The Homework Life.)

I've made sure to include the scripts for the syntaxhighlighter before my script to call it, and my script is run on the page load.

However, if I call SyntaxHighlighter.all() or SyntaxHighlighter.highlight() after the page load (using Chrome's developer console), it transforms it. But why isn't it doing it automatically? Thanks.

I've noticed you don't use the [document ready function](https://learn.jquery.com/using-jquery-core/document-ready/) before calling your syntax highlighter. Try this, don't call it just in your script, but only when your whole document is _ready_, which is indicated by the function included above. I assume it doesn't work, because sometimes when you call `SyntaxHighlighter.highlight();` the DOM elements are not loaded yet. — Clemens Himmer, Dec 19 '15 at 15:02
No, it is not reliable enough, i'll be back with a Fiddle in a minute, it should fix your issue. — Clemens Himmer, Dec 19 '15 at 15:05
@Tarekis, I just tried it. It doesn't fix it... See [this post](http://stackoverflow.com/a/6026730/2397327). — Jonathan Lam, Dec 19 '15 at 15:06
Okay at least that excludes this potential error source, it then might be a problem in how you call the highlighter. I'll look a little more into that then. PS: Still use the _document.ready_, when i started programming i had some issues with that, it is the safe way to call code that needs to be called on page load. — Clemens Himmer, Dec 19 '15 at 15:13

score 1 · Accepted Answer · answered Dec 19 '15 at 15:26

1

It's a error you have in when you call your highlighter method.

You dynamically load the code into your HTML. Now when the document is ready, it will call your highlighter, but as your code you want to highlight is not in the hardcoded HTML, but is loaded later so the highlighter might not be able to find it.

In your $.getJSON you load all your content, after this method is done, you have the code you want to highlight in your HTML, means you can can call SyntaxHighlighter.all() . All you have to do is to add the highlighter to this function so it is called at the right time.

$.getJSON("posts/posts.json", function(data) {
    $.each(data, function(i, post) {
        var newElement = $("<div>");
        newElement.addClass("post");
        newElement.append("<span class='details'>By " + post.author + "<br />On " + post.time + "</span>");
        newElement.append("<span class='title'>" + post.title + "</span>");
        newElement.append("<blockquote class='content'>" + post.content + "</blockquote>");
        $("div#posts").append(newElement);
    });

// Now you loaded all your Content in your HTML and you're able to make that code fancy!
    SyntaxHighlighter.all();
    SyntaxHighlighter.highlight();
});

answered Dec 19 '15 at 15:26

Clemens Himmer

1,340
2
13
26

So I'll just put it in the callback of `getJSON()`. – Jonathan Lam Dec 19 '15 at 15:28
Sure, just call your code when your loop is done like i included in my answer, everythings loaded properly at this moment and highlighting won't be a problem. For the next time. just a little tip off-topic. I knew your error was caused by this, but for easier testing try to make a [JSFiddle](https://jsfiddle.net/) or a similar testing enviorment, it's really easy to edit these and find the issue. – Clemens Himmer Dec 19 '15 at 15:32
Actually, it's not working right now. I put that in my code but it doesn't work... I'll fiddle around for an error. – Jonathan Lam Dec 19 '15 at 15:32
I just saw the code, remove the document.ready function, it doesn't belong there. – Clemens Himmer Dec 19 '15 at 15:33
I was just fiddling around and put that in just to see if it'd work. I'll remove it now. But I think I just fixed the problem...somehow. Thanks again! – Jonathan Lam Dec 19 '15 at 15:34

SyntaxHighlighter unreliable and not working on mobile

1 Answers1