如何结合 WMD 和美化，比如 Stack Overflow？
Posted
技术标签:
【中文标题】如何结合 WMD 和美化，比如 Stack Overflow？【英文标题】：How to combine WMD and prettify, like Stack Overflow? 【发布时间】：2010-12-09 08:54:59 【问题描述】：Prettify 需要将class="prettyprint" 添加到<pre> 或<code>。如何让WMD 做到这一点？
【问题讨论】：
【参考方案1】：看看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 源文件位于父目录中。
要启用语法高亮，您需要做两件事：
-
将“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();
让您了解灵活性。 Google-Code-Prettify 是在 code.google.com 和 ***.com 上启用语法突出显示的同一个库。
我花了一点时间才弄明白如何让它工作，但令人惊讶的是它是多么容易实施。这只是一个演示示例，但进一步扩展它应该不会太难。
【讨论】：
注意：我需要调用PR.prettyPrint() 而不是 prettyPrint() 才能刷新预览。【参考方案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>
上面的机制描述here 希望对您有所帮助。
【讨论】：
链接codingthewheel.com/archives/…，死了！！【参考方案3】：您可能对Stack Overflow version of WMD on Github 感兴趣。此版本可能具有您正在寻找的功能（但我不确定）。
【讨论】：
以上是关于如何结合 WMD 和美化，比如 Stack Overflow？的主要内容，如果未能解决你的问题，请参考以下文章
WMD - 如何获取生成的\Markdown HTML 代码
如何让 WMD-Editor 将 Markdown 发布到服务器而不是 HTML？