最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

Makedown在线预览编辑器

来源:http://www.erdangjiade.com/ 沐浴春风 2015-08-20 23:20浏览(1629)

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

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

Makedown在线预览编辑器
分类:其它特效 > 编辑器 难易:中级
查看演示

加我微信,拉你进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>
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/218.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2