给自己的网页添加MarkDown编辑器

对于程序员来说,使用MarkDown编辑器远远比使用word等编辑器好,统一自然、代码高亮等特点已经成为了程序员的必备编辑器。

那么如何使自己开发的页面也具备markdown编辑器的功能呢?

需要看效果的,可以到我自己的个人博客查看:palewl.cn

下载与安装

1.下载开源的编辑器插件 Markdown.zip
方法一:官网下载:https://pandao.github.io/editor.md/ —速度有点慢,有点难下载

方法二:百度网盘 https://pan.baidu.com/s/1JzoQR17zopU9t7Jq7XWvvg 提取码:qdlz —推荐√ 速度虽然慢,但是还是可以下载的

2.解压文件,并复制到你自己的项目中去。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3.在你需要markdown功能的页面引入css和js
在这里插入图片描述
在这里插入图片描述需要注意的是,markdowm需要jq的支持,所以也需要引入jq文件。

4.markdowm其实就是一种文本编辑器,比如我们做个人博客的时候,发布文章一般都有标题、内容

两个框,markdown就是要放在内容框里面展示的。

4.1将textarea文本框定义在一个新的div区,id为:md-content.如图
在这里插入图片描述

4.2 复制以下js代码到前面,注意要在jq和editormd.min.js的后面。

var contentEditor;

$(function() {
    contentEditor = editormd("md-content", {
        width   : "100%",
        height  : 640,
        syncScrolling : "single",
        path    : "../static/lib/editormd/lib/"
    });
});

也可以将代码放在专门的js文件里,引入即可。

在这里插入图片描述

至此,大功告成。
在这里插入图片描述在这里插入图片描述

  • 8
    点赞
  • 55
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
### 回答1: CSDN的Markdown编辑器可以在写文章页面中找到。在写文章页面,可以看到一个叫做“编辑器”的区域,其中有一个选项卡是Markdown编辑器。 至于控制行距的功能,它位于Markdown编辑器中的“段落格式”下拉菜单中。在这个下拉菜单中,可以选择“行高”选项,然后选择所需的行距大小。 ### 回答2: csdn的Markdown编辑器位于CSDN网站的写博客页面中,你需要先登录CSDN账号,然后在导航栏中选择“写博客”。在写博客页面,你可以看到一个文本编辑框,这个编辑框即为Markdown编辑器。 至于控制行距的功能,在CSDN的Markdown编辑器中,它并没有提供直接设置行距的功能。Markdown编辑器采用的是轻量级标记语言,主要用于排版文字内容。要调整行距,可以使用HTML标签中的`<p>`和`<br>`等来控制段落和换行的距离。或者在Markdown语法中使用双空格加回车来实现换行,行与行之间的距离也会相应变大。 总之,CSDN的Markdown编辑器基本提供了常用的文本编辑功能,但在行距的调整上相对有限,你可以尝试使用HTML标签或Markdown语法的换行方式来达到你想要的效果。如果需要更复杂的排版需求,建议使用其他专业的文本编辑工具或者HTML编辑器。 ### 回答3: CSDN的Markdown编辑器位于文章编辑页面的顶部工具栏中。在进入CSDN的编辑页面后,你会看到一个文本输入框,就是Markdown编辑器。你可以在这个编辑器中输入并编辑你的Markdown文本。 关于控制行距,Markdown编辑器本身并没有直接提供控制行距的功能。Markdown是一种纯文本标记语言,其主要关注文本的结构和样式,而并不涉及到行距等排版细节。因此,要控制Markdown文本的行距,你需要在导出或展示Markdown文本的环境中进行额外的设置。 如果你要展示Markdown文本,在CSDN博客中,行距可以通过在Markdown文本中添加一些HTML和CSS代码来实现。具体地说,你可以在需要设置行距的段落前后分别使用`<p>`标签,并通过CSS样式设置`line-height`属性来控制行距的大小。例如,以下代码可以将行距设置为1.5倍: ``` <p style="line-height: 1.5;">这是一个段落。</p> ``` 当然,在其他的Markdown编辑器或平台上,可能有不同的方法来控制行距。具体的操作需要根据所使用的编辑器或平台而定。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值