How to combine WMD and prettify, like Stack Overfl

2楼-- · 2019-03-25 19:57

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.

0人赞添加讨论(0) 举报

太酷不给撩

3楼-- · 2019-03-25 20:01

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.

0人赞添加讨论(0) 举报

Deceive 欺骗

4楼-- · 2019-03-25 20:08

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

0人赞添加讨论(0) 举报

How to combine WMD and prettify, like Stack Overfl

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间