专注内容写作的你一定不要错过markdown
简单介绍markdown是一种标记语言，通过简单的标记语法可以使普通的文本内容具有一定的格式，使用非常简单，学习成本极低
目前各大Blog平台都已支持markdown编辑器，某道云笔记也已支持markdown，各开源Blog，Wiki都在逐渐投入markdown的怀抱，身为技术人员如果现在还不知道markdown的话可能会被大佬diss
editor.md是一款开源的的markdown编辑器，体验流畅且界面友好，被诸多系统所采用，本篇文章也主要使用editor.md编辑器做介绍
项目集成editor.md编辑器的使用非常简单，只需如下几步
github下载软件放到项目内，这里我放在static/plugins下
git pull https://github.com/pandao/editor.md.git页面引入css、js文件
<link href="http://www.likecs.com/static/plugins/editor.md/css/editormd.min.css"> // 依赖jquery，自行引入或参考demo <script src="http://www.likecs.com/static/plugins/editor.md/js/editormd.min.js"></script>创建一个DOM容器来容纳编辑器
<div></div>通过editormd方法来实例化容器
var testEditor = editormd("editormd", { width: "100%", height: 720, syncScrolling: "single", path: "/static/plugins/editor.md/lib/", // 设置主体颜色 theme : "dark", previewTheme : "dark", editorTheme : "pastel-on-dark", markdown : md, codeFold : true, //syncScrolling : false, saveHTMLToTextarea : true, // 保存 HTML 到 Textarea searchReplace : true, //watch : false, // 关闭实时预览 htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启 //toolbar : false, //关闭工具栏 //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启 emoji : true, // 启用emoji表情 taskList : true, // 启用tasklist tocm : true, // Using [TOCM] tex : true, // 开启科学公式TeX语言支持，默认关闭 flowChart : true, // 开启流程图支持，默认关闭 sequenceDiagram : true, // 开启时序/序列图支持，默认关闭, //dialogLockScreen : false, // 设置弹出层对话框不锁屏，全局通用，默认为true //dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true //dialogDraggable : false, // 设置弹出层对话框不可拖动，全局通用，默认为true //dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度，全局通用，默认值为0.1 //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff imageUpload: true, //开启图片上传 imageFormats: ["jpg", "jpeg", "gif", "png", "bmp"], //支持上传的图片格式 imageUploadURL: "{% url 'api-upload-url' %}" //处理图片上传的后端URL地址 // 图片上传后可以在onload里做进一步处理 onload : function() { console.log('onload', this); //this.fullscreen(); //this.unwatch(); //this.watch().fullscreen(); //this.setMarkdown("#PHP"); //this.width("100%"); //this.height(480); //this.resize("100%", 640); } });editor.md提供了很多配置参数可以用了配置编辑器，根据自己环境选择使用，具体参考官方文档
这里配置了图片上传的三个参数imageUpload、imageFormats、imageUploadURL，在下边图片上传的地方会用到
一个基于editor.md的markdown编辑器就诞生了
如果页面不涉及编辑，单纯展示，那么则需要引入如下JS/CSS文件
<link href="http://www.likecs.com/static/plugins/editor.md/css/editormd.preview.min.css"/> <script type="text/javascript" src="http://www.likecs.com/static/plugins/editor.md/lib/marked.min.js"></script> <script type="text/javascript" src="http://www.likecs.com/static/plugins/editor.md/lib/prettify.min.js"></script> <script type="text/javascript" src="http://www.likecs.com/static/plugins/editor.md/lib/raphael.min.js"></script> <script type="text/javascript" src="http://www.likecs.com/static/plugins/editor.md/lib/underscore.min.js"></script> <script type="text/javascript" src="http://www.likecs.com/static/plugins/editor.md/lib/sequence-diagram.min.js"></script> <script type="text/javascript" src="http://www.likecs.com/static/plugins/editor.md/lib/flowchart.min.js"></script> <script type="text/javascript" src="http://www.likecs.com/static/plugins/editor.md/lib/jquery.flowchart.min.js"></script> <script type="text/javascript" src="http://www.likecs.com/static/plugins/editor.md/js/editormd.min.js"></script>初始化DOM容器
<div> <textarea># 站点介绍 - site：**运维咖啡吧** - url：[https://ops-coffee.cn](https://ops-coffee.cn) - slogen: **追求技术的道路上，我从不曾停下脚步** # 图片示例 </textarea> </div>