如何结合WMD和美化,就像Stack Overflow？

Question

需要class="prettyprint"添加<pre>或者添加Prettify<code>.如何让大规模杀伤性武器这样做？

Answer 1

看一下PageDown Markdown编辑器......

AFAIK,WMD已经死了,但是PageDown是一个基于WMD源的分支.

这是一个基于WMD工作的活跃项目.这照顾了Markdown编辑器.要使语法高亮显示工作,您还需要从Google-Code-Prettify项目下载源代码.

将demo.html,demo.css,prettify.js,prettify.css合并到同一个文件夹中.

相应地修改导入:

<link rel="stylesheet" href="demo.css" />
<link rel="stylesheet" href="prettify.css" />

<script src="../Markdown.Converter.js"></script>
<script src="../Markdown.Sanitizer.js"></script>
<script src="../Markdown.Editor.js"></script>
<script src="prettify.js"></script>

注意:这假定PageDown源文件位于父目录中.

要启用语法突出显示,您需要做两件事:

1. 将"prettyprint"类添加到编辑器生成的所有"代码"元素中.
2. 在进行更改后触发prettyPrint()事件.

如果您查看代码,我修改了非清理转换器来执行这两项操作:

var converter2 = new Markdown.Converter();
converter2.hooks.chain("postConversion", function (text) {
    return text.replace(/<pre>/gi, "<pre class=prettyprint>");
});

var editor2 = new Markdown.Editor(converter2, "-second");
editor2.hooks.chain("onPreviewRefresh", function () {
    prettyPrint();
});
editor2.run();

为了让您了解灵活性.Google-Code-Prettify是在code.google.com和stackoverflow.com上启用语法突出显示的相同库.

我花了一些时间来弄清楚如何让它工作,但实现它是多么容易.这只是一个演示示例,但进一步扩展它不应该太难.

Answer 2

您可能对Github 上的 Stack Overflow 版本的 WMD感兴趣。该版本可能具有您正在寻找的功能（但我不确定）。