如何像Stack Overflow一样将WMD和美化结合起来?

发布于 2024-08-08 11:58:08 字数 275 浏览 10 评论 0原文

Prettify 需要 class="prettyprint"添加到

。如何让 WMD 执行此操作?

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

故事与诗 2024-08-15 11:58:08

看看 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' 类添加到所有 '编辑器生成的“代码”元素。
  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 上启用语法突出显示的同一个库。

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

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:

  1. Add the 'prettyprint' class to all 'code' elements generated by the editor.
  2. 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.

凉城 2024-08-15 11:58:08

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

此处描述了上述机制
希望有帮助。

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.

凉城凉梦凉人心 2024-08-15 11:58:08

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

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文