9

Prettify需要class="prettyprint"添加到<pre>or<code>中。如何让WMD做到这一点？

4

3 回答 3

5

看看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' 类添加到编辑器生成的所有 'code' 元素中。
  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 上启用语法高亮的同一个库。

我花了一点时间才弄清楚如何让它工作，但令人惊讶的是它是多么容易实现。这只是一个演示示例，但进一步扩展它应该不会太难。

于 2012-08-16T05:57:26.107 回答
3

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

这里描述了上述机制， 希望对您有所帮助。

于 2011-09-06T13:54:12.270 回答
0

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

于 2009-10-23T07:37:14.263 回答