使用editor.md渲染markdown并自定义目录

2023-11-18

使用editor.md渲染markdown并自定义目录

一、需求

最近在开发个人博客,在做文章详情页的时候,需要将markdown格式的文本字符串渲染成html页面,于是逛github的时候发现了这一款markdown在线编辑器,它支持将markdown文本解析成html字符串。

二、Editor.md简介

Editor.md是一款基于CodeMirror & jQuery & Marked的开源在线markdown编辑器。在GitHub上斩获12.1k starts。
github链接
官网地址
在这里插入图片描述
它具有以下特性:

  • 支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法,也可变身为代码编辑器;
  • 支持实时预览图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能;
  • 支持 ToC(Table of Contents)、Emoji表情、Task lists、@链接等 Markdown 扩展语法;
  • 支持 TeX 科学公式(基于 KaTeX)、流程图 Flowchart 和 时序图 Sequence Diagram;
  • 支持识别和解析 HTML 标签,并且支持自定义过滤标签及属性解析,具有可靠的安全性和几乎无限的扩展性;
  • 支持 AMD / CMD 模块化加载(支持 Require.js & Sea.js),并且支持自定义扩展插件;
    兼容主流的浏览器(IE8+)和 Zepto.js,且支持 iPad 等平板设备;

三、使用Editor.md

Editor.md使用起来非常简单,首先使用github download下载Editor.md
在这里插入图片描述

然后在项目根目录下新建editor.md文件夹,将下载得到的下列文件复制粘贴到该文件夹中。
在这里插入图片描述
使用前我们需要将editor.md对应的文件引入页面

<!-- 引入editor.md相关样式 -->
<link rel="stylesheet" href="../editor.md/css/editormd.preview.css" />

<!-- 引入editor.md js文件 -->
<script src="../editor.md/jquery.min.js"></script>
<script src="../editor.md/editormd.js"></script>
<script src="../editor.md/lib/marked.min.js"></script>
<script src="../editor.md/lib/prettify.min.js"></script>

准备一个容器,用于渲染markdown文本

<div id="article-md-body" class="article-md-body"></div>

//目录容器
<div class="pannel article-toc" id="article-toc"></div>

渲染markdown,调用editormd.markdownToHTML(id , config)传入容器id和配置对象即可。

var editor = editormd.markdownToHTML('article-md-body', {
  markdown: ’‘, //待渲染的markdown文本字符串
  tocContainer: '#article-toc',	//指定目录容器的id
  tocDropdown: false
})

效果如下图(当然这里的效果图添加了一些自己编写的额外样式,本文只列出与editor.md相关的代码)
在这里插入图片描述
可以自己给目录编辑一些样式,美化一下,目录本身是没有缩进的,我们可以自己使用js给目录添加缩进用来展示层级关系

// 目录层级
const tocLink = document.querySelectorAll('a[level]')	//目录的每一项就是一个包含level属性的a标签
tocLink.forEach((item) => {
  const level = parseInt(item.getAttribute('level'))
  item.style.paddingLeft = (level - 1) * 10 + 'px'	//利用level属性的值设置左padding
})

最终效果
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用editor.md渲染markdown并自定义目录 的相关文章

  • 防止用户在下拉菜单中选择默认值

    我试图阻止用户选择默认的下拉菜单选项 有没有办法在下拉菜单选项中添加文本而不是值 我的代码
  • 如何并排放置两个

    我有两个 div 我想要并排放置的元素 如下所示 navigation content 我想要导航 div 根据需要尽可能大 但不能更大 收缩以适应行为 内容 div 然后应该填充剩余的空间 如何在不指定百分比 例如 20 80 的情况下使
  • Node.js - console.log 不显示数组中的项目,而是显示 [Object]

    我在注销对象内数组的内容时遇到问题 实际的物体看起来像这样 var stuff accepted item1 item2 rejected response Foo envelope from The sender to new item1
  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显
  • W3C 验证器:“握手警报:unrecognized_name”

    我正在尝试验证我的网站W3C Nu Html 检查器 https validator w3 org nu doc https 3A 2F 2Fwww healthdrop in 2F但我遇到了以下错误 不知道为什么 IO 错误 握手警报 u
  • 在为 RXJS 可观察量编写测试时,如何避免让调度程序通过我的业务逻辑?

    我发现使某些测试通过的唯一方法是显式地将调度程序传递给函数 为了便于说明 请考虑以下函数 function doStuff stream return stream delay 100 filter x gt x 2 0 map x gt
  • 如何通过php获取网页的Open Graph协议?

    PHP 有一个简单的命令来获取网页的元标记 get meta tags 但这仅适用于具有名称属性的元标记 然而 开放图谱协议如今变得越来越流行 从网页获取 opg 值的最简单方法是什么 例如 我看到的基本方法是通过 cURL 获取页面并使用
  • 如果链接包含特定文本,jQuery 将类添加到 href

    我的网站上的列表中有一些动态填充的链接 这些链接链接到文件 是否可以使用 jQuery 查看文件名是否以 pdf 结尾 并在 href 或类似的链接文本以 mp3 结尾时添加一个类 例如 我的列表中有以下链接 文件1 pdf 歌曲1 mp3
  • 如何流式传输 OpenAI 的完成 API?

    我想流式传输结果通过 OpenAI 的 API 完成 https beta openai com docs api reference completions 该文档提到使用服务器发送的事件 https developer mozilla
  • JS用正则表达式替换数字

    我有元素的标识符 如下所示 form book 1 2 3 我想要的是用其他值替换该标识符中的第二个数字 我将函数 match 与以下正则表达式一起使用 var regexp d d d 但它返回我包含的数组 1 2 3 2 因此 当我尝试
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • JSTL 在循环中每 5 个字段集创建一个新行

    您好 我目前正在迭代并在表中显示字段集列表 为了让布局变得更得体一些 我想在每次循环到达第五个字段集时创建一个新行 谢谢 JSP div class det table class det tr td td tr table div
  • 如何在jquery中获取保存时间和当前时间的差异?

    我想在 javascript 或 jquery 中获取保存时间和当前时间之间的时差 我节省的时间看起来像Sun Oct 24 15 55 56 GMT 05 30 2010 java中的日期格式代码如下 String newDate 201
  • 如何获取 UIWebView 中元素的位置?

    我在 iPad 程序中加载了 html 的 UIWebView 通过使用 webkit column width 我将 html 分为几列 padding 0px height 1024px webkit column gap 0px we
  • 数据表日期范围过滤器

    如何添加日期范围过滤器 like From To 我开始进行常规搜索和分页等工作 但我不知道如何制作日期范围过滤器 我正在使用数据表 1 10 11 版本 My code var oTable function callFilesTable
  • 如何在 Google 地图 V3 中创建编号地图标记?

    我正在制作一张上面有多个标记的地图 这些标记使用自定义图标 但我还想在顶部添加数字 我已经了解了如何使用旧版本的 API 来实现这一点 我怎样才能在V3中做到这一点 注意 当您将鼠标悬停在标记上时 标题 属性会创建一个工具提示 但我希望即使
  • 显示覆盖以覆盖整个页面

    我有一个正在加载的网络应用程序iframe 我需要显示一个覆盖 div 来覆盖整个页面 问题是叠加层当前仅显示在iframe区域而不覆盖整个页面 我们的应用程序 子应用程序 是加载的一组应用程序的一部分iframe 你可以做这样的事情 di
  • 在 Javascript 中减少/分组数组

    基于this https stackoverflow com a 40774906 3254598例如 我想以稍微不同的方式按对象进行分组 结果应该如下 key audi items make audi model r8 year 2012
  • 如何在 gulp.src 中使用基本正则表达式?

    我正在尝试选择两个文件gulp src highcharts js and highcharts src js 当然 我知道我可以使用数组表达式显式添加这两个表达式 但出于学习目的 我尝试为它们编写一个表达式 我读过可以使用简单的正则表达式
  • 在 GWT 中,在任何主机页标记上添加事件处理程序

    我想为任何标签添加 MouseOver 事件处理程序 举个例子 我想为旧版 HTML 页面中的每个锚点页面添加事件处理程序 继GWT指南 http code google com webtoolkit doc 1 6 DevGuideUse

随机推荐

  • linux下gz和tar.gz、zip压缩解压

    文章目录 说明 分享 tar gz 常用命令 gz 常用命令 zip 常用命令 总结 说明 本博客每周五更新一次 日常数据处理中 经常需要压缩数据文件 减小传输带宽 方便分享和存储 整理gz tar gz zip三种格式 一般场景中的压缩解
  • niginx 配置代理websokcet

    server listen 80 server name xxx xxx cn client max body size 20m location proxy redirect off proxy set header Host host
  • C++写csv文件

    代码如下 include
  • ubuntu 如何放开端口

    在 Ubuntu 上放开端口 可以通过以下步骤进行操作 使用 root 用户或具有管理员权限的用户登录到 Ubuntu 系统 使用防火墙工具 如ufw 放开特定的端口 ufw 是 Ubuntu 上的一个简化的防火墙配置工具 可以轻松管理端口
  • JS阻止事件冒泡的3种方法

    什么是JS事件冒泡 在一个对象上触发某类事件 比如单击onclick事件 如果此对象定义了此事件的处理程序 那么此事件就会调用这个处理程序 如果没有定义此事件处理程序或者事件返回true 那么这个事件会向这个对象的父级对象传播 从里到外 直
  • 小技巧粗讲 - 用栈实现括号匹配的判断

    Codeforces上有一道我曾经讲过的题 买看过的小伙伴看这个链接 https blog csdn net ericgipsy article details 79980874 然后再来一道题 http www fjutacm com P
  • 2021年11月6日-11月12日(ogre抄写+ue4视频,本周35小时,共1035小时,剩8965小时。)

    这周还不错 不但完成了本周学习任务 还完成了本月学习任务 方法就是 拼命抄源码 抄到吐时就再看看Ue4视频教程 内外兼修 可以在未来的日子里这么进行 每天5小时学习 还是进入状态的 5 7 35小时 共1035小时 剩8965小时 另外 去
  • [HBZ分享] 小米手机如何解BL锁

    第一步 进入 设置 gt 我的设备 gt 全部参数 gt 连续疯狂的点MIUI版本那一行 第二步 进入 更多设置 gt 开发者模式 打开USB调试 与 USB安装 第三步 进入 更多设置 gt 开发者模式 进入 设别解锁状态 在下方有一个
  • 利用PostMan 模拟上传/下载文件

    我们经常用postman模拟各种http请求 但是有时候因为业务需要 我们需要测试上传下载功能 其实postman也是很好支持这两种操作的 一 上传文件 1 打开postman 选择对应request类型 以及url 2 选择body 单击
  • OkHttp3封装网络请求框架

    网络请求是开发中最基础的功能 框架原生API不便于复用 今天在这里分享慕课一位老师基于OkHttp封装的一个思路 希望对大家有帮助 首先 我们看一下Okhttp的基本使用 发送异步GET请求 1 new OkHttpClient 2 构造R
  • apt、apt-get、apt-cache使用详解

    文章目录 1 概述 2 搜索软件 查看软件信息 依赖关系 3 查看已安装软件 4 安装 升级软件 5 删除 6 清理 检查 7 忽略更新 8 apt get参数 9 参考文档 1 概述 apt apt get apt cache是三个软件
  • js修改数组中对象的key值

    不删除旧的key和value var data name 路口1 count 30 name 路口2 count 20 name 路口3 count 10 data data map item gt item value item coun
  • vue-router传参的四种方式超详细

    vue路由传参的四种方式 一 router link路由导航方式传参 父组件
  • 微服务优点缺点

    微服务架构采用Scale Cube方法设计应用架构 将应用服务按功能拆分成一组相互协作的服务 每个服务负责一组特定 相关的功能 每个服务可以有自己独立的数据库 从而保证与其他服务解耦 耦合是指两个或两个以上的体系或两种运动形式间通过相互作用
  • 移动端按设计图1:1布局方法

    1 为什么要写这篇教程 移动端布局大多数前端工程师使用的是百分比布局 然而百分比布局造成了很多问题 比如图片在不同分辨率下会有变形的问题 高度需要按照分辨率去兼容适配等等 今天给大家分享的这种布局方式 可以摈弃百分比布局 直接根据设计图1
  • 管道符和xargs

    先看一个例子 今天上了一门Linux课 其中有一道题是这样的 将文件 lib 目录下所有以包含 so的文件复制到cmd test目录下 一开始看到这个题 想法是先用find命令找出包含 so的文件 然后使用管道符cp 如下 find lib
  • robotstudio要从当前占位符中提取IRB2600....

    如上图所示 在添加singal后重启控制器便出现了这样的提示 找了一圈也没有找到答案 希望有高人指点指点
  • 关于8266WiFi模块(AT)问题分析与解答(单片机和wifi模块连接)

    近段时间由于作品需要 就入手了一个esp 01 s 8266wifi模块 厂家已经刷好固件 这个模块使用起来还是很简单便捷的 但是在调试过程中会遇到各种问题 以下是个人的一个总结 希望对大家有帮助 1 单片机晶振和波特率问题 重要 有关单片
  • 基于预测控制模型的自适应巡航控制仿真与机器人实现(Matlab代码实现)

    目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码 1 概述 自适应巡航控制技术为目前由于汽车保有量不断增长而带来的行车安全 驾驶舒适性及交通拥堵等问题提供了一条有效的解决途径 因此本文通过理论分析 仿真验证及实车实验对自适应
  • 使用editor.md渲染markdown并自定义目录

    使用editor md渲染markdown并自定义目录 一 需求 最近在开发个人博客 在做文章详情页的时候 需要将markdown格式的文本字符串渲染成html页面 于是逛github的时候发现了这一款markdown在线编辑器 它支持将m