用于渲染代码的 javascript 书签

Question

我最近在聊天部分了解到，如果使用书签，则可以渲染 LaTeX:

http://meta.math.stackexchange.com/a/3297

stackexchange 站点都渲染代码像这样。 `` 之间的任何内容都会呈现为代码。

我发现这个功能非常好用。我想知道是否有人知道如何在 stackexchange 站点中获取执行此操作的 javascript，并将其作为书签，就像 mathjax 书签一样在这里找到:

http://www.math.ucla.edu/~robjohn/math/mathjax.html

这样，如果我在 facebook 或任何其他网站上写一些带有反引号转义的内容，我只需单击显示 renderCode 的书签，JavaScript 就会执行与此网站中相同的操作。

有人知道以前是否有人问过这个问题和/或如何实现这个目标吗？谢谢

Answer 1

这是您的开始:

var replacer = function(s, match) {return "<code>" + match + "</code>";};

"some `delimited` code `sections` here". replace(/`([^`]*)`/g, replacer);
    // ==> "some <code>delimited</code> code <code>sections</code> here"

您可以使用任何您喜欢的标记来代替“”和“”来创建您喜欢的效果。

您还可以使用这样的函数:

processTextNodes = function(element, fn) {
    var children = element.childNodes;
    for (var i = 0; i < children.length; i++) {
        var node = children[i];
        var type = node.nodeType;
        if (type == 1) processTextNodes(node, fn);
        if (type == 3) fn.call(this, node);
    }
}

像这样:

processTextNodes(someElement, function(node) {
    node.value = node.value.replace(/`([^`]*)`/g, replacer);
});

为了将其应用于元素内的所有文本节点。

您仍然需要将其变成书签，并弄清楚如何找到正确的元素。您将需要标记和 CSS 来按您喜欢的方式显示输出。但这可能是一个好的开始。