为了账号安全,请及时绑定邮箱和手机立即绑定

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

各位小伙伴们,冷月今天给大家发一波福利。我们都知道markdown编辑器非常的好用,是我们写作的好帮手。这样的一款好用的文章编辑器,我们怎么才能让自己的博客也支持呢,冷月今天来教大家如何将Markdown编辑器搬进您的博客。

首先,我们来看一下效果图:
20200223205839250.png

那么我们要怎么做呢,冷月这边帮大家找到一个开源的Markdown编辑器叫Editor.md,但是官方已经没有维护这个项目了。所以冷月将下载好的插件放到了我的公众号中。大家只需要关注冷月的微信公众号:学长冷月。回复:markdown。冷月将整理好的资料发给您。

好了,大家下载好了插件后,只需要按照我下面的介绍来就可以成功。

20200223210401462.png

首先,大家看到的目录结构是这样的,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引入您的博客啦。

如果这篇博文有帮助到您,可以帮冷月点一个赞或者加一个关注哦!

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
PHP开发工程师
手记
粉丝
0
获赞与收藏
8

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消