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

Your Answer