wmd - 如何结合大规模杀伤性武器和美化武器，例如堆栈溢出？

Question

Prettify需要将class="prettyprint"添加到<pre>或<code>中。如何让WMD执行此操作？

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源文件位于父目录中。

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

将'prettyprint'类添加到编辑器生成的所有'code'元素中。

进行更改后触发prettyPrint()事件。

如果您看一下代码，我修改了未 sanitizer 的转换器以同时执行以下操作:

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上突出显示语法。

我花了一些时间弄清楚如何使其工作，但实现起来如此容易却令人惊讶。这只是一个演示示例，但进一步扩展它应该不难。