带有 Prettify 的自动 SyntaxHighlighter

Question

在学校项目中我们创建了一个基于论坛的网站。我们正在使用 PageDown and Prettify 来处理文本。
但是就像现在一样，我们必须在代码上使用  才能顺利地完成它，但是有什么方法可以告诉程序使用美化自动处理来自 PageDown 的所有 <pre> 标签吗？

自动 SyntaxHighlighter 有什么缺点吗？

1# 可能的解决方案，但不是我想要的：

您可以将 $("pre").addClass("prettyprint"); 添加到 javascript。此代码将为每个预标记提供 prettyprint class，但此短代码在 Markdown 预览中不起作用，因此对我来说这只是 50% 的解决方案。

2# 预览时可能的解决方案，但用户不友好：

我发现您可以调用函数 prettyPrint(); 来突出显示带有 class="prettyprint" 的所有 <pre> 标签。因此，如果我们将解决方案与此结合起来并添加一个 setInterval()（或类似 .click 的其他内容）来进行调用，我们将获得适用于 Markdown 预览的内容。我认为这种方式对用户不友好，因为它使用了大量的计算机功能（我认为），如果你仔细观察，你有时会在 <pre> 标签中看到一点点闪烁。
这是代码：

var timer = setInterval(prettytimer, 0);

function prettytimer() {
    $("pre").addClass("prettyprint");
    prettyPrint();
};

如果有人想知道为什么没有 .removeClass() 或 hasClass() 检查，那是因为 .addClass() 没有添加相同的 class 两次。

Answer 1

3# 我寻求的解决方案：

这是我在预览处理程序站点和网页其余部分的解决方案 1# 中寻求的解决方案。可能有一些更好的方法，但这种方法会给你 Stack Overflow 的感觉。

var timer;

//If the code button have been pressed {}
$("#wmd-code-button").click(function () {
    clearTimeout(timer);
    timer = setTimeout(prettytimer, 3000);
});

//when on key have been released inside textarea
$(".wmd-input").on("keyup", function () {
    clearTimeout(timer);
    timer = setTimeout(prettytimer, 3000);
});

//If `timer` reach 3000 (3 seconds) execute this
function prettytimer() {
    $("pre").addClass("prettyprint");
    prettyPrint();
};

如果您使用的是 pageDown Markdown，则无需对此代码进行任何更改，只需将其复制到 javascript 文件中即可:)

带有 Prettify 的自动 SyntaxHighlighter

Automatic SyntaxHighlighter with Prettify

asp.net

asp.net-mvc-5

syntax-highlighting

prettify

pagedown

1# 可能的解决方案，但不是我想要的：

2# 预览时可能的解决方案，但用户不友好：

3# 我寻求的解决方案：