带有 Prettify 的自动 SyntaxHighlighter答案

【问题标题】：Automatic SyntaxHighlighter with Prettify带有 Prettify 的自动 SyntaxHighlighter
【发布时间】：2016-05-21 15:46:29
【问题描述】：

在一个学校项目中工作，我们创建了一个基于论坛的网站。我们使用PageDown 和Prettify 来处理文本。
但是就像现在一样，我们必须在代码上使用 才能让它变得漂亮和流畅，但是有什么方法可以告诉程序处理来自PageDown 的所有<pre>tags 自动与美化？

使用自动 SyntaxHighlighter 有什么缺点吗？

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

您可以将$("pre").addClass("prettyprint"); 添加到javascript。此代码将为每个 pre 标签提供 prettyprint 类，但此短代码在 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() 不会两次添加相同的类。

【问题讨论】：

标签： asp.net asp.net-mvc-5 syntax-highlighting prettify pagedown

【解决方案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 文件中即可：)

【讨论】：