如何结合WMD和美化，如Stack Overflow？
Prettify需要将class="prettyprint"添加到<pre>或<code>中。如何让WMD做到这一点？
回答 3
Stack Overflow用户
发布于 2012-08-16 13:57:26
看看PageDown的Markdown编辑器...
虽然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‘类添加到编辑器生成的所有'code’元素中。
- 在进行更改后激发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 Prettify是在code.google.com和stackoverflow.com上支持语法突出显示的同一个库。
我花了一小段时间才弄清楚如何让它工作，但它的实现是多么容易，这是令人惊讶的。这只是一个演示示例，但要进一步扩展它应该不会太难。
Stack Overflow用户
发布于 2011-09-06 21:54:12
在jquery的帮助下，并使用timer插件，这可以通过以下方式完成。
<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希望它能有所帮助。
Stack Overflow用户
发布于 2009-10-23 15:37:14
您可能会对Stack Overflow version of WMD on Github感兴趣。这个版本可能会有你想要的特性(但我不确定)。
https://stackoverflow.com/questions/1611861
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号