javascript - SyntaxHighlighter 不可靠且无法在移动设备上运行

Question

我已经开始使用SyntaxHighlighter满足我的语法突出显示需求。

但是，我意识到它不适用于移动设备。同样，它通常在桌面浏览器上不起作用，但有时可以。

它通常默认返回 <pre>样式，因为 SyntaxHighlighter 不会转换 <pre>形成自己的风格<div> :

但是有时它会做它应该做的事情:

(您可以在我的网站 The Homework Life 上看到此效果。)

我已确保在调用语法荧光笔的脚本之前包含语法荧光笔的脚本，并且我的脚本在页面加载时运行。

但是，如果我调用 SyntaxHighlighter.all()或SyntaxHighlighter.highlight()页面加载后(使用 Chrome 的开发者控制台)，它会对其进行转换。但为什么它不自动执行呢？谢谢。

Answer 1

这是您在调用荧光笔方法时遇到的错误。

您可以将代码动态加载到 HTML 中。现在，当文档准备就绪时，它将调用您的荧光笔，但由于您要突出显示的代码不在硬编码的 HTML 中，而是稍后加载，因此荧光笔可能无法找到它。

在您的 $.getJSON 中加载所有内容，此方法完成后，您就拥有了要在 HTML 中突出显示的代码，这意味着您可以调用 SyntaxHighlighter.all () 。您所要做的就是向此函数添加荧光笔，以便在正确的时间调用它。

$.getJSON("posts/posts.json", function(data) {
    $.each(data, function(i, post) {
        var newElement = $("<div>");
        newElement.addClass("post");
        newElement.append("<span class='details'>By " + post.author + "<br />On " + post.time + "</span>");
        newElement.append("<span class='title'>" + post.title + "</span>");
        newElement.append("<blockquote class='content'>" + post.content + "</blockquote>");
        $("div#posts").append(newElement);
    });

// Now you loaded all your Content in your HTML and you're able to make that code fancy!
    SyntaxHighlighter.all();
    SyntaxHighlighter.highlight();
});