Speed up performance on load?

  • Resolved w3215

    (@w3215)


    6 years, 8 months ago

    Syntax Highlighter Evolved works very well for me, with one issue: When I load a post that has a code sample, the code sample comes in without formatting, and then it takes a second for the code sample to be reformatted into the syntax highlighter version. So its a little jarring when loading a page–the page will load and then change a second later (to add the syntax highlighter formatting to any code samples).

    Is there anything to be done about this? Any way to have the syntax highlighter formatting load faster?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor viper007bond

    (@viper007bond)

    Nope. Since it’s done via JavaScript, the page needs to finish loading before the JavaScript can kick in.

    The only alternative to this is server-side highlighting which would result in a bunch of extra HTML and a bit more server load.

    Both methods have their advantages and disadvantages.

    • This reply was modified 6 years, 8 months ago by viper007bond.
    Thread Starter w3215

    (@w3215)

    I really enjoy this plugin for showing code samples, but I would still appreciate if there is a way to address the fact that going to a page, the code first appears unformatted, and then (say a second later, while the full page is loading) the formatting of the code sample kicks in. In other words, to address the fact that the code first appears one way, and then jumps to another format (the syntax highlighter format) as the page is loading.

    Is there a way to hide the code sample entirely until the javascript is fully loaded?

    Perhaps putting a spinner or something like that in place of the code until it loads?

    I doubt that is part of the plugin itself, but wanted to ask here in case that is something people have seen in the world of displaying code samples.

    Plugin Contributor viper007bond

    (@viper007bond)

    You should totally be able to do that via CSS. Target the pre and hide it or replace it with a placeholder or whatever. The JavaScript adds a bunch of additional CSS classes when it renders, which you could use to re-show the code.

    Inspecting elements via your browser’s developer tools is probably the easiest way to see all of the classes and you can also live edit the CSS there too to test.

    • This reply was modified 6 years, 8 months ago by viper007bond.
    Thread Starter w3215

    (@w3215)

    To get the code to be hidden prior to syntax highlighter formatting kicking in, this seems to work:

    pre {
    display: none !important
    }
    (of course, you want to be sure not to have any other pre on the site you actually want to show)

    I have also found it helpful to make the code formatting that WP automatically loads more similar to syntaxhighlighter evolved formatting–that way, when the syntax highlighter formatting kicks in, it is not as jarring. Here is some css that works decently well for that, depending on one’s settings for syntaxhighlighter:

    pre {
  border: none !important;
  margin: 0px !important;
  padding: 0px !important;
  margin-left: 55px !important;
  font-weight: bold !important;
}

code {
  font-size: 1em !important; //depends on font of syntaxhighlighter
}

    Note: this is using the twenty sixteen WP theme.

    • This reply was modified 6 years, 7 months ago by w3215.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Speed up performance on load?’ is closed to new replies.