带有 $().load 的 SyntaxHighlighter 不起作用

Question

编辑：为了清晰和实际使用而进行的编辑。实际使用甚至可能使这种情况变得更容易？

我正在构建一个样式指南，我想为将要使用该指南的人包含常见样式/模式的源代码。我的计划是将所有繁重的 HTML 代码模块抽象到外部文件中，并使用 jQuery 将它们拉入，然后使用 SyntaxHighlighter 突出显示屏幕上显示的内容。下面的 HTML 显示了我的意图和我想做的事情。

我暂时删除了所有 JavaScript，因为它不会为手头的问题增加任何价值。我会更新我想出的任何东西。

<div class="sg-section">
    <div class="sg-section-body">
        <div data-load="markup/pagination.html"></div>
    </div>
    <div class="sg-section-code">
        <small>Source Code</small>
        <pre class="brush: js">
            <!-- This is where I want to print out the contents  -->
            <!-- of the 'sg-section body' above and show it's source -->
        </pre>
    </div>
</div>

我可以使用简单的 $('[data-load]'.each(); 语句加载数据，但我很难将结果打印到 sg-section-code 并突出显示。

结论：切换到Prism。工作精美。

Answer 1

已编辑：

  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;
} 

要删除占位符并直接从外部 html 插入代码，这应该可以解决您只显示占位符而不显示实际代码的问题。

你的问题是 load 是一个异步方法，你不知道什么时候调用 SyntaxHighlight.all();

所以，我想到的解决方案是使用 jQuery.Deferred 对象。让load 告诉你它何时完成加载所有外部脚本。

首先提取方法loadScript

function loadScript(placeholder){
  var $p = $(placeholder);
  var deferred = $.Deferred();
  $p.load($p.attr('data-load'),function(){
    deferred.resolve();
  });
  return deferred;
}

然后将所有任务压入一个数组，最后使用$.when().then()通知所有脚本加载完毕，然后调用SyntaxHighlighter.all();

$(function(){
  var q = [];
  $('[data-load]').each(function(item){
    q.push(loadScript(item));
  });
  $.when.apply($, q).done(function(){
    SyntaxHighlighter.all();
  });
});

Answer 2

$(document).ready(function(){

    // Get Markup Pages
    $("[data-load]").each(function (index) {
        $(this).load($(this).attr("data-load"),function(){SyntaxHighlighter.all()});
    });
});

这应该可以工作，因为 SyntaxHighlighter.all(); 在 test.html 加载后执行