javascript - markdown编辑器预览实时高亮?
大家讲道理
大家讲道理 2017-04-10 12:48:20
[JavaScript讨论组]

采用了和segmentfault同样的pagedown编辑器,我现在希望在插入代码时,能做到像segmentfault那样的实时高亮。

首先,给出我的html代码:

<p style="padding-top:5px;" class="control-group">
                    <p class="controls">
                        <p id="wmd-button-bar"></p>
                        <textarea class="wmd-input" name="content" id="wmd-input"></textarea>
                    </p>
            </p>
            <p style="padding-top:20px;" class="control-group">
                    <p class="controls">
                        <p id="wmd-preview" class="wmd-preview question-preview"></p>
                    </p>
            </p>

上面的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>

现在的问题是,我输入代码的时候,经常会造成页面未响应,请问下这是什么原因?是否因为我这个方法的性能太差,有没有性能更好的方法?求指点,谢谢!

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(0)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号