Making the SyntaxHighlighter Evolved Plugin Work with Infinite Scroll on WordPress.org Sites

SyntaxHighlighter Evolved is a great plugin to format source code on a WordPress.org blog. Also, WordPress.org blogs can now allow you to use Infinite Scroll, which uses AJAX to load posts as you scroll down the blog.

The problem is that once you begin scrolling past the first block of posts that were initially loaded, the posts loaded using Infinite Scroll no longer highlight the code.

The fix is to call the “SyntaxHighlighter.highlight()” method each time a block of posts are loaded.

I’m sure there are many ways this could be done. The way I chose was to take this block of code from the file “jetpack/modules/infinite-scroll/infinity.php”:

// If primary and fallback rendering methods fail, prevent further IS rendering attempts. Otherwise, wrap the output if requested.
if ( empty( $results['html'] ) ) {
    unset( $results['html'] );
    do_action( 'infinite_scroll_empty' );
    $results['type'] = 'empty';
} elseif ( $this->has_wrapper() ) {
    $wrapper_classes = is_string( self::get_settings()->wrapper ) ? self::get_settings()->wrapper : 'infinite-wrap';
    $wrapper_classes .= ' infinite-view-' . $page;
    $wrapper_classes = trim( $wrapper_classes );

    $results['html'] = '<div class="' . esc_attr( $wrapper_classes ) . '" id="infinite-view-' . $page . '" data-page-num="' . $page . '">' . $results['html'] . '</div>';
}

and add this one line to the block:

$results['html'] .= '<script type="text/javascript">SyntaxHighlighter.highlight();</script>';

resulting in this block:

// If primary and fallback rendering methods fail, prevent further IS rendering attempts. Otherwise, wrap the output if requested.
if ( empty( $results['html'] ) ) {
    unset( $results['html'] );
    do_action( 'infinite_scroll_empty' );
    $results['type'] = 'empty';
} elseif ( $this->has_wrapper() ) {
    $wrapper_classes = is_string( self::get_settings()->wrapper ) ? self::get_settings()->wrapper : 'infinite-wrap';
    $wrapper_classes .= ' infinite-view-' . $page;
    $wrapper_classes = trim( $wrapper_classes );

    $results['html'] = '<div class="' . esc_attr( $wrapper_classes ) . '" id="infinite-view-' . $page . '" data-page-num="' . $page . '">' . $results['html'] . '</div>';
    $results['html'] .= '<script type="text/javascript">SyntaxHighlighter.highlight();</script>';
}

Save the file and reload your blog. All code blocks should now be highlighted as you scroll!

Leave a Reply