如何结合大规模杀伤性武器并美化，像堆栈溢出？(How to combine WMD and pret

美化需要class="prettyprint"是添加到<pre>或<code> 。如何让WMD做到这一点？

Answer 1:

看看在PageDown键降价编辑器...

据我所知，大规模杀伤性武器是死的，但PageDown键是基于大规模杀伤性武器来源叉子。

它是基于在大规模杀伤性武器所做的工作的活动项目。这需要降价主编的照顾。要获得语法高亮工作，你还需要从下载源谷歌典，美化工程。

结合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>

注意：此假设下页源文件中的父目录。

要启用语法高亮，你需要做两件事情：

在“prettyprint”类添加到由编辑器生成的所有“代码”的元素。
火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();

为了让你的灵活性的想法。谷歌典，美化是使语法高亮code.google.com上和stackoverflow.com相同的库。

我花了一些时间来弄清楚如何得到它的工作，但它是惊人的是多么容易实现。这只是一个演示的例子，但它不应该太难进一步扩展它。

Answer 2:

使用jQuery的帮助和使用定时器这个插件可以通过以下方式进行。

<html>
  <head>
    <title>My Page Title</title>
    <link rel="stylesheet" type="text/css" href="wmd/wmd.css" />
    <script type="text/javascript" src="wmd/showdown.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.timers.js"></script>
    <link href="lib/prettify/prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="lib/prettify/prettify.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $('#wmd-input').keydown(function() {
                $(this).stopTime();
                $(this).oneTime(1000, function() {  styleCode(); });
            });
        });
        function styleCode(){

            $("#wmd-preview pre").addClass("prettyprint");
            $("#wmd-preview code").html(prettyPrintOne($("#wmd-preview code").html()));
        }
    </script>
  </head>
  <body onload="prettyPrint()">

    <div style="width:400px;min-height: 500px;">
        <div id="wmd-button-bar" class="wmd-panel"></div>
        <br/>
        <textarea id="wmd-input" class="wmd-panel"></textarea>
        <br/>
        <div id="wmd-preview" class="wmd-panel"></div>
        <br/>
        <div id="wmd-output" class="wmd-panel"></div>   
    </div>

    <script type="text/javascript" src="lib/wmd/wmd.js"></script>
  </body>

说明上述的机制在这里希望它帮助。