Edited:
function loadScript(placeholder){
var $p = $(placeholder);
var deferred = $.Deferred();
$p.load($p.attr('data-load'),function(response){
$p.parent().append(response).end().remove();
deferred.resolve();
});
return deferred;
}
to remove the placeholder and insert your code from external html directly, this should solve your problem that only display the placeholder instead of real code.
your problem is that load is an async method, and you don't know when to call SyntaxHighlight.all();
so, the solution come into my head is use jQuery.Deferred object. let load
tell you when it fininsh loading all external scripts.
first extract the method loadScript
function loadScript(placeholder){
var $p = $(placeholder);
var deferred = $.Deferred();
$p.load($p.attr('data-load'),function(){
deferred.resolve();
});
return deferred;
}
then push all the task into an array, finally use $.when().then() to notify when all the script has been loaded, then call SyntaxHighlighter.all();
$(function(){
var q = [];
$('[data-load]').each(function(item){
q.push(loadScript(item));
});
$.when.apply($, q).done(function(){
SyntaxHighlighter.all();
});
});