如何使用HTML+CSS做一个实时预览的markdown编辑器-创新互联

这篇文章主要介绍了如何使用HTML+CSS做一个实时预览的markdown编辑器，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

成都创新互联公司是专业的托克托网站建设公司，托克托接单;提供成都网站制作、网站建设、外贸网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行托克托网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

第一步搭建布局:

1.构思布局（以下是总体布局）

如何使用HTML+CSS做一个实时预览的markdown编辑器

2.项目下新建个index.html页面,写入以下代码:




markdown编辑器

* {margin: 0;padding: 0;outline: none;border-radius: 0;
}
html,body {width: 100%;height: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;background-color: #ebebeb;
}#toolbar {height: 50px;background-color: #444;width: 100%;color: #fff;line-height: 50px;
}#container {overflow: auto;position: absolute;bottom: 0;left: 0;right: 0;top: 50px;
}#editor-column,#preview-column {width: 49.5%;height: 100%;overflow: auto;position: relative;background-color: #fff;
}.pull-left {float: left;
}
.pull-right {float: right;
}

#mdeditor#preview,#panel-editor,#panel-preview{ height: 100%; width: 100%; }

var acen_edit = ace.edit('mdeditor'); acen_edit.setTheme('ace/theme/chrome'); acen_edit.getSession().setMode('ace/mode/markdown'); acen_edit.renderer.setShowPrintMargin(false); $("#mdeditor").keyup(function() { $("#preview").html(marked(acen_edit.getValue())); });

加粗斜体 ')">引用..... 设置: Chrome Clouds Crimson Editor Dawn Dreamweaver Eclipse GitHub IPlastic Solarized Light TextMate Tomorrow XCode Kuroir KatzenMilch SQL Server Ambiance Chaos Clouds Midnight Cobalt Gruvbox idle Fingers krTheme Merbivore Merbivore Soft Mono Industrial Monokai Pastel on dark Solarized Dark Terminal Tomorrow Night Tomorrow Night Blue Tomorrow Night Bright Tomorrow Night 80s Twilight Vibrant Ink 字体大小 10px 11px 12px 13px 14px 16px 18px 20px 24px 代码折行 manual mark begin mark begin and end 自动换行 Off 40 Chars 80 Chars Free 全选样式光标行高光显示行号打印边距

...... $("#theme").change(function() { acen_edit.setTheme($(this).val()); }) $("#fontsize").change(function() { acen_edit.setFontSize($(this).val()); }) $("#folding").change(function() { session.setFoldStyle($(this).val()); }) $("#select_style").change(function() { acen_edit.setOption("selectionStyle", this.checked ? "line" : "text"); }) $("#highlight_active").change(function() { acen_edit.setHighlightActiveLine(this.checked); }) $("#soft_wrap").change(function() { acen_edit.setOption("wrap", $(this).val()); }) $("#show_print_margin").change(function() { acen_edit.renderer.setShowPrintMargin(this.checked); })

重庆分公司，新征程启航

如何使用HTML+CSS做一个实时预览的markdown编辑器-创新互联

其他资讯