2

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

有自动 SyntaxHighlighter 有什么缺点吗？

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

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

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

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

var timer = setInterval(prettytimer, 0);

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

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

4

1 回答 1

0

我选择的 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 文件中即可：)

于 2016-05-25T18:14:02.543 回答