SyntaxHighlighter.all() doesn't work on DOM level?

Question

I'm loading content dynamically into a div using the jQuery load() function. In the callback I'm calling SyntaxHighlighter.all(), to pretty print the syntax of the pre block that just got loaded into the div.

The problem is that the content is loaded OK, but the syntax doesn't get highlighted. However, when I hardcode the pre block in the div, so not loading in into the DOM via the jQUery load() function, the syntax get's highlighted as it should.

So I'm guessing that the SyntaxHighlighter.all() only works on pre blocks that are in the html source, that can be viewed using view page source, and not on the actual content in the DOM?

Any idea how I can make it work?

The javascript to do the loading and highlighting:

<script type="text/javascript">
        $.ajaxSetup ({
            cache: false
        });

        $(document).ready(function() {
            var tree = $("#tree li");
            var contentContainer = $("#contentContainer");
            var content = $("#content");

            SyntaxHighlighter.config.clipboardSwf = 'syntaxhighlighter_2.0.320/scripts/clipboard.swf';
            SyntaxHighlighter.all();

            // Treeview
            $("#tree").treeview({
                persist: "location",
                collapsed: true
            });

            tree.click(function() {
                if ($(this).hasClass("file")) {
                    tree.removeClass("selected");
                    $(this).addClass("selected");
                    content.load("content/"+this.id+".html", function() {
                        contentContainer.effect("highlight");
                        SyntaxHighlighter.all();
                    });
                }
            });
        });
    </script>

the content div:

<div id="content">
                <pre class="brush: java;">
/**
 * The HelloWorldApp class implements an application that
 * simply prints "Hello World!" to standard output.
 */
class HelloWorldApp {
    public static void main(String[] args) {
        System.out.println("Hello World!"); // Display the string.
    }
}
                </pre>
            </div>

the external file that gets loaded with jQuery.load():

Hello World

<pre class="brush: java;">
/**
 * The HelloWorldApp class implements an application that
 * simply prints "Hello World!" to standard output.
 */
class HelloWorldApp {
    public static void main(String[] args) {
        System.out.println("Hello World!"); // Display the string.
    }
}
</pre>

Kind regards

Answer 1

1. Make the element hidden with css (display:none)
2. Add the element to the page
3. Call SyntaxHighlighter.all()
4. When you're ready to make it visible, remove the css or class that made it hidden.

Answer 2

solution: http://stackoverflow.com/questions/1370738/jquery-load-issue/1374067#1374067