Search code examples
javascriptreliabilitysyntaxhighlighter

SyntaxHighlighter unreliable and not working on mobile

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

screenshot1

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

screenshot2

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

Solution

  • 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();
});