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

Question

我已经开始使用 SyntaxHighlighter 来满足我的语法高亮需求。

但是，我发现它不适用于移动设备。同样，它通常不能在桌面浏览器上运行，但有时可以。

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

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

（你可以在我的网站上看到这个效果，The Homework Life。）

我确保在我的脚本调用它之前包含 syntaxhighlighter 的脚本，我的脚本在页面加载时运行。

但是，如果我在页面加载后调用 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();
});

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

SyntaxHighlighter unreliable and not working on mobile

javascript

reliability

syntaxhighlighter