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

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

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

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

首先,大家看到的目录结构是这样的,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

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

  1. 本地Markdown文件上传到博客

    本地Markdown文件上传到博客 参考:https://www.cnblogs.com/ccylhw/p/13954153.html 1.Typora 最漂亮的写作APPhttps://www.ty ...

  2. 基于.NetCore开发博客项目 StarBlog - (7) 页面开发之文章详情页面

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  3. 基于.NetCore开发博客项目 StarBlog - (18) 实现本地Typora文章打包上传

    前言 九月太忙,只更新了三篇文章,本来这个功能是从九月初就开始做的,结果一直拖到现在国庆假期才有时间完善并且写文章~ 之前我更新了几篇关于 Python 的文章,有朋友留言问是不是不更新 .Net 了 ...

  4. 我的主博客在CSDN,这里只有部分文章,这是地址https://blog.csdn.net/z979451341

    我的主博客在CSDN,这里只有部分文章,这是地址https://blog.csdn.net/z979451341

  5. 教你如何快速上手markdown语法,编写技术博客(史上最全最简,用MarkDown写博客)

    首先,进行有道云笔记官网,新建一份markdown文档, 如下图 然后,在文档编辑区,左边,复制如下段落文字 加粗 斜线 标记颜色 下划线 废弃线 一级标题 二级标题 三级标题 四级标题 五级标题 六 ...

  6. 基于SpringBoot从零构建博客网站 - 集成editor.md开发发布文章功能

    发布文章功能里面最重要的就是需要集成富文本编辑器,目前富文本编辑器有很多,例如ueditor,CKEditor.editor.md等.这里守望博客里面是集成的editor.md,因为editor.md ...

  7. 在云服务器搭建WordPress博客(六)发布和管理文章

    <( ̄︶ ̄)↗[GO!] 发布文章是一个网站后台最重要的功能之一,WordPress的文章发布功能是比较强大的,系统简单地介绍一下. 访问后台 – 文章 – 写文章 ,就可以看到如下图所示的界面 ...

  8. [置顶] 如何更改CSDN博客高亮代码皮肤的样式,使博客看起来更有范(推荐)

    由于本人写博客的时候,也没有配置博客的相关属性,因此贴出来的代码块都是CSDN默认的,因此代码背景色都是白色的,如下所示: 但是本人在浏览他人博客的时候,发现有些博客的代码块看起来比较有范,整个代码库 ...

  9. 如何更改CSDN博客高亮代码皮肤的样式,使博客看起来更有范(推荐)

    由于本人写博客的时候,也没有配置博客的相关属性,因此贴出来的代码块都是CSDN默认的,因此代码背景色都是白色的,如下所示: 但是本人在浏览他人博客的时候,发现有些博客的代码块看起来比较有范,整个代码库 ...

随机推荐

  1. Word Embeddings: Encoding Lexical Semantics(译文)

    词向量:编码词汇级别的信息 url:http://pytorch.org/tutorials/beginner/nlp/word_embeddings_tutorial.html?highlight= ...

  2. 惠普电脑win10关闭自动调节亮度

    自动调节亮度真的太烦人了,突然从亮的画面变暗,又从暗的亮度变量,眼睛受不了.但是试了很多种方法都不行. 方法 第一种: 有一些电脑是有在设置--->显示界面--->有一个 关闭自动调节 按 ...

  3. vue-particles做背景,鼠标动画粒子连线填坑(按钮没有点击响应)

    为了提高页面展示效果,登录界面内容比较单一的,粒子效果作为背景经常使用到,vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果. 解决问题: 以背景方式显示 无法获取按钮焦点, ...

  4. js中 call() 和 apply() 方法的区别和用法详解

    1.定义 每个函数都包含俩个非继承而来的方法:call() 和 apply()   call 和 apply 可以用来重新定义函数的的执行环境,也就是 this 的指向:call 和 apply 都是 ...

  5. redis 常用命令行

    一.key 相关: ()redis允许模糊查询 key(keys *) 有3个通配符 *.?.[] ()randomkey:返回随机key ()type key:返回key存储的类型 ()exists ...

  6. IntelliJ IDEA 2020 的Debug功能也太好用了,真香!

    写在前边 作为一个有点强迫症的程序员来说,所有的应用软件.开发工具都必须要升级到最高版本,否则就会很难受到坐立不安.日思夜想.茶饭不思.至于什么时候得的这种病我也记不清了,哈哈哈 IntelliJ I ...

  7. CCF_201612-1_最大波动

    http://115.28.138.223/view.page?gpid=T47 水. #include<iostream> #include<cstring> #includ ...

  8. CCF_ 201412-1_门禁系统

    水. #include<iostream> #include<cstdio> using namespace std; int main() { ],num[] = {}; c ...

  9. JS中map与forEach的区别

    很多同学可能对于map与forEach的区别不是太了解,今天我们介绍一下JS中的map与forEach方法, 我对map的理解是,这个方法对一个数组arr1中的每一个元素进行遍历(传递给一个数组,参数 ...

  10. sqlserver datatime value plus random number

    If we want to make some identiity value in sqlserver , we can use identity data type in a table.Howe ...