Makedown在线预览编辑器

收藏

Markdown 是 一款纯文本格式的编辑器，所以通过同一个名字，它可以使用工具来转换成 HTML。readme 文件，在线论坛编写消息和快速创建富文本文档的文本编辑器都非常流行使用 Markdown 格式。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

markdown有以下功能：

• 方便的导入导出功能
• 直接把一个markdown的文本文件拖放到当前这个页面就可以了
• 导出为一个html格式的文件，样式一点也不会丢失
• 编辑和预览同步滚动，所见即所得（右上角设置）
• VIM快捷键支持，方便vim党们快速的操作 （右上角设置）
• 强大的自定义CSS功能，方便定制自己的展示
• 有数量也有质量的主题,编辑器和预览区域
• 完美兼容Github的markdown语法
• 预览区域代码高亮
• 所有选项自动记忆

HTML

<div id="wmd-editor" class="panel">
    <div id="wmd-button-bar"></div>
    <textarea rows="11" id="wmd-input" class="wmd-textarea"></textarea>
    <div id="wmd-preview" class="wmd-panel"></div>
</div>

引入jQuery和markdown相关插件：

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jQuery/showdown.js"></script>
<script type="text/javascript" src="jQuery/wmd.js"></script>
<script type="text/javascript" src="jQuery/prettify.js"></script>

调用markdown插件：

<script type="text/javascript">
    var title = $('#wmd-preview');
    title.bind('DOMNodeInserted', function(e) {
        $("#wmd-preview pre").addClass("prettyprint");
        prettyPrint();
    });
</script>