使用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并自定义目录 的相关文章

随机推荐

  • 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