markdown编辑器预览实时高亮?
采用了和segmentfault同样的pagedown编辑器,我现在希望在插入代码时,能做到像segmentfault那样的实时高亮。
首先,给出我的html代码:
<div style="padding-top:5px;" class="control-group">
<div class="controls">
<div id="wmd-button-bar"></div>
<textarea class="wmd-input" name="content" id="wmd-input"></textarea>
</div>
</div>
<div style="padding-top:20px;" class="control-group">
<div class="controls">
<div id="wmd-preview" class="wmd-preview question-preview"></div>
</div>
</div>
上面的wmd-input是输入界面,下面的wmd-preview是预览界面
我希望在输入界面输入代码时,预览界面能实时高亮,我用的是highlight.js开源代码高亮插件:
我的想法是,监听wmd-preview的变化,当它的内容发生变化时,调用hightlight.js的高亮方法,代码如下:
<script type="text/javascript">
var preview = $('#wmd-preview');
preview.bind('DOMNodeInserted',
function(e) {
$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
});
</script>
现在的问题是,我输入代码的时候,经常会造成页面未响应,请问下这是什么原因?是否因为我这个方法的性能太差,有没有性能更好的方法?求指点,谢谢!
jquery markdown HTML JavaScript
乃们都是禽兽
11 years, 10 months ago