将Markdown编辑器搬进您的博客-让咱们更优雅的书写文章

各位小伙伴们，冷月今天给你们发一波福利。咱们都知道markdown编辑器很是的好用，是咱们写做的好帮手。这样的一款好用的文章编辑器，咱们怎么才能让本身的博客也支持呢，冷月今天来教你们如何将Markdown编辑器搬进您的博客。

首先，咱们来看一下效果图：
<img src="https://img-blog.csdnimg.cn/20200223205839250.png" width="100%">

那么咱们要怎么作呢，冷月这边帮你们找到一个开源的Markdown编辑器叫Editor.md，可是官方已经没有维护这个项目了。因此冷月将下载好的插件放到了个人公众号中。你们只须要关注冷月的微信公众号：学长冷月。回复：markdown。冷月将整理好的资料发给您。

好了，你们下载好了插件后，只须要按照我下面的介绍来就能够成功。

<img src="https://img-blog.csdnimg.cn/20200223210401462.png" width="60%">

首先，你们看到的目录结构是这样的，index.html是官方给的一个示例代码，你们能够参考使用。以下所示：

<link rel="stylesheet" href="editormd/css/editormd.css" />
<div id="test-editor">
    <textarea style="display:none;">### 关于 Editor.md

**Editor.md** 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
    </textarea>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="editormd/editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("test-editor", {
            // width  : "100%",
            // height : "100%",
            path   : "editormd/lib/"
        });
    });
</script>

你们只须要将这段代码放入您本身须要引入markdown的地方，再把css和js的路径改为你的地址，那么您就成功将markdown引入您的博客啦。

若是这篇博文有帮助到您，能够帮冷月点一个赞或者加一个关注哦！

欢迎关注个人公众号：学长冷月，得到独家整理的学习资源和平常干货推送。
若是您对个人专题内容感兴趣，也能够关注个人博客： guoyu7.com