將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