How to combine WMD and prettify, like Stack Overflow?

问题

Prettify needs class="prettyprint" to be add to <pre> or <code>. How to let WMD do this?

回答1:

Take a look at the PageDown Markdown editor...

AFAIK, WMD is dead, but PageDown is a fork based on the WMD source.

It's an active project based on the work done in WMD. That takes care of the Markdown editor. To get syntax highlighting working you'll also need to download source from the Google-Code-Prettify project.

Combine the demo.html, demo.css, prettify.js, prettify.css into the same folder.

Modify the imports accordingly:

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

Note: This assumes that the PageDown source files are in the parent directory.

To enable syntax highlighting, you'll need to do two things:

Add the 'prettyprint' class to all 'code' elements generated by the editor.
Fire the prettyPrint() event after a change is made.

If you take a look at the code, I modified the non-sanitized converter to do both:

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();

To give you an idea of the flexibility. Google-Code-Prettify is the same library that enables syntax highlighting on code.google.com and stackoverflow.com.

It took me a little while to figure out how to get it to work but it's amazing how easy it is to implement. This is only a demo example but it shouldn't be too hard to extend it further.

回答2:

With the help of jquery and using the timer plugin this can be done in the following way.

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

The mechanism of the above is described here Hope it helps.

回答3:

You may be interested in the Stack Overflow version of WMD on Github. This version may have the feature you're looking for in it (but I'm not certain).

来源：https://stackoverflow.com/questions/1611861/how-to-combine-wmd-and-prettify-like-stack-overflow

标签

wmd

prettify