【elementui源码解析】如何实现自动渲染md文档-第三篇

目录

1.前言

2.webpack.demo.js

3.markdown文档

4.fence.js

1)tokens

2):::

3)```

5.containers.js

1)markdown-it-container

2)md.use()

3)代码逻辑

4)containers小结

6.congfig.js

1)markdown-it-chain

2)slugify

3)markdown-it-anchor

4)代码逻辑

7.总结


所有章节:

  • 【elementui源码解析】如何实现自动渲染md文档-第一篇
  • 【elementui源码解析】如何实现自动渲染md文档-第二篇
  • 【elementui源码解析】如何实现自动渲染md文档-第四篇

1.前言

之前我们看了iconInit.jsbuild-entry.js文件,在build:file命令里还存在node build/bin/i18n.js & node build/bin/version.js这两个命令,在这里我们就不细看了,因为我们主要目的是分析md文档如何自动渲染到页面中的,这两个文件一个是根据模版文件和json配置文件自动生成多语言的主题,另一个是自动生成elementui版本列表。我们接下来主要看webpack.demo.js这个文件,这个文件是webpack打包的配置文件。

图1

2.webpack.demo.js

这个文件里面渲染md文档的主要代码就是这段,自定义了一个md-loader,然后md-loader文件夹里面有几个文件在接下来会一一介绍他们的作用。

图2

3.markdown文档

要看懂这个md-loader文档的代码,还是要对markdown的基本语法有一些了解,在这里可以看下基本语法:Markdown基本语法

其次还有关于markdown-it解析器的api的文档,可以结合着文档和源码来看这些api:markdown-it 中文文档

4.fence.js

首先这个文件覆盖了fence默认的渲染策略。

第3行代码:在很多Markdown解析器中,如markdown-it等,默认的fence渲染策略通常是将代码内容包裹在<pre><code>标签中,并且根据代码块的语言类型(如javascript),添加对应的CSS类来应用语法高亮。elementui对其进行了覆盖。

图3

图4

第6行代码,可能会疑问这个tokens是什么东西,这是markdown-it解析器实现的数据结构,具体可以看下面例子,我在自己的项目里面加了如下的md文档。首先要了解这样一个前提,解析器是会把md文档的内容转义成HTML的。如图6。

图5

图6 

1)tokens

可能会有很多人不清楚tokens是什么,所以我在第7行代码打印了tokens。我截了部分内容如下三张图。比如md文档第一行“## Input 输入框”,在tokens的解析下解析为三个,可以见图7,tag为“h2”,type分别为“heading_open、inline、heading_close”三个,同时对应的nesting的三个值为[-1、0、1],分别代表开标签、内容、闭标签。

                                 图7                                                                              图8

                                图9

我们主要关注图9,type为“fence”,info为“html”这个token。fence.js这个文件就是主要对type为fence的content进行渲染策略的更改。第9行第10行代码就是在判断是否这个fence是否在demo里面。如果是的话就return第12行的代码来渲染代码到文档里。可以见图10理解。

图10

2):::

::: 在此上下文中作为自定义区块的开始和结束标记。当Markdown处理器遇到这样的标签时,它会根据预定义的规则来解析和渲染这部分内容,例如将描述作为提示信息显示,并将跟随的代码片段渲染为可交互的演示组件。至于为什么要加demo这个符号,可能是因为elementui的逻辑处理需要demo这个表示符来帮助匹配代码,如代码中的正则表达式,同时也是为后面的自定义容器做的准备。

3)```

``` 后面加html的原因是为了高亮,在默认的markdown语法中```后面也是可以加一些标识符的,见最后面的图11。至于高亮是怎么实现的,为什么加个slot="highlight"就能高亮,原因是elementui使用了highlight.js这个库,至于具体实现就不深究了。

图11

5.containers.js

1)markdown-it-container

markdown-it-container是一个 markdown-it 的插件,它扩展了markdown-it 的功能,允许用户自定义块级语法容器。这意味着你可以定义自己的Markdown语法(通常是一对特定标签,比如elementui的 ```html```),用于包裹内容,并对这些内容应用自定义的渲染逻辑。

2)md.use()

md.use()方法用于注册插件,以扩展Markdown解析器的功能。这个文件主要注册了三个自定义的块级容器,demo、tip、warning。只有validate函数通过后才能进入render函数渲染。

3)代码逻辑

这里的validate函数就是match含有“demo”的内容。可以同时看上面图9来帮忙理解。然后render函数里就是匹配demo后面的描述内容,比如图9里的“通过 `disabled` 属性指定是否禁用 input 组件”,然后第12行的content就是```html```里的代码块,然后将代码块放到<!--element-demo: ${content}:element-demo-->里,在后面会有用处。

4)containers小结

总的来说。

'demo' 容器:用于演示或代码示例,带有可选的描述性文本。通过正则表达式 ^demo\s*(.*)$ 验证容器开头的标签,并从描述中提取内容。渲染逻辑会在开始标签处创建一个 <demo-block> 元素,并根据需要包含描述内容和代码块。结束标签处则闭合这个 <demo-block>。

'tip' 和 'warning' 容器应该是md自带的渲染格式。可以见图13和图14。

图12

图13

图14

6.congfig.js

图15 

1)markdown-it-chain

markdown-it-chain是是一个为 markdown-it 解析器设计的配置辅助库,它的主要作用在于提供一种更简洁、易读且链式的方法来配置和扩展 markdown-it。

2)slugify

slugify的作用是将给定的字符串转换成一个“slug”格式的字符串。Slug通常用于URLs、文件名等,它由字母、数字、连字符或下划线组成,不包含空格或其他特殊字符,且往往都是小写的。这对于创建友好、安全且搜索引擎优化(SEO)友好的链接非常有用。

在Markdown处理或网站开发中,slugify常常用于生成文章标题的URL友好版本,或者为自动创建的锚点、ID等提供基础。例如,将一篇名为 "基础用法" 的文章标题转换成 slug 可能会变成 ji-chu-yong-fa"。

图16

3)markdown-it-anchor

markdown-it-anchor的主要作用是在生成的HTML文档中自动为每个标题(heading)添加锚点链接。这使得用户可以轻松链接到文档内的特定部分,提升长篇文章或文档的可导航性和可用性。

在12-19行代码中是其具体配置。

  • level:2表示指定从Markdown文档的第2级标题(即两个#号开始的标题)开始添加锚点。这意味着只有## 标题名称及以上的标题会生成锚点。
  • slugify:指定使用从 transliteration 模块导入的 slugify 函数来生成锚点的ID。这意味着标题文本将被转换成URL友好的字符串,适合用作网页链接的一部分。
  • permalink:true表示启用“永久链接”功能,会在每个标题旁边添加一个可点击的小图标或链接,用户点击后可以直接跳转到该标题的链接。
  • permalinkBefore:true表示设置“永久链接”图标或链接出现在标题文本之前。如果设为 false,则链接会出现在标题之后。

图17

4)代码逻辑

第10行就是通过options.html(true).end()启用markdown中直接插入HTML的功能。

第21行就是导入并使用containers.js中定义的三个容器。

第23行就是通过config.toMd()生成配置好的markdown-it实例。

第24行就通过overWriteFenceRule()来覆盖牧人的代码块处理渲染逻辑。

7.总结

我们在下一篇再来总结index.js里做了什么操作,这里是核心代码,所以单独一篇来讲。

总的来说,在fence.js里面覆盖了默认的 fence 渲染策略,在container.js里面定义了自定义容器,最后在config.js里面配置和初始化markdown-it解析器。md-loader里的代码还是要对md文档有一些基础知识才方便看懂,我也是一边看官方使用文档,一边看elementui代码。大家一起学起来吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/29069.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

5G消息 x 政务 | 新型数智政务服务平台

5G消息 x 政务 | 新型数智政务服务平台 通过 5G 消息&#xff0c;帮助政府部门及公共事业部门优化服务品质、提高服务效能&#xff0c;打造现代政府的展示窗口、便民利企的服务窗口、营商环境的感知窗口&#xff0c;提供多元、透明、高效的线上政务服务。 5G消息 x 政务 —— 优…

转型AI产品经理(11):“损失规避”如何应用在Chatbot产品中

损失规避是行为经济学和心理学中的一个重要概念&#xff0c;它揭示了人们在面对潜在的收益和损失时&#xff0c;表现出对损失的强烈偏好避免&#xff0c;相比于获得同等价值的利益&#xff0c;人们对损失的感受更为强烈。它主要有以下特征&#xff1a; 1、不对称性 损失规避体…

nvm 报错https://npm.taobao.org/mirrors/node/index.json 淘宝镜像更换

文章目录 一、问题背景二、解决问题1. 获取配置文件的位置2. 修改配置文件中的镜像源配置3. 修改 npm 镜像源 一、问题背景 使用nvm的时候报错: Could not retrieve https://npm.taobao.org/mirrors/node/index.json. 由于淘宝的镜像域名更换&#xff0c;npm.taobao.org 域名…

同三维T80004JEH2-4K60 双路4K60 HDMI解码器

输出&#xff1a;2路HDMI2路3.5音频&#xff0c;最高支持1路4K60HDMI输出 可以同源/独立分屏输出两种模式可选&#xff1a;对应两个HDMI输出一样和不一样的信号 同源可以解码36路网络流&#xff08;1/4/9/16/25/36&#xff09;&#xff0c;两个HDMI输出一样的信号&#xff…

运行vue3项目相关报错

1. VSCode打开TSVue3项目很多地方报错 报错内容 几乎所有文件都会出现未知飘红 error Delete CR prettier/prettier报错原因 插件冲突&#xff0c;Windows系统回车换行符与MAC不一致&#xff08;所以这个问题Windows系统才会出现&#xff09; 解决 需要安装Vue - Official…

java的Filter(过滤器),Interceptor(拦截器) 和 Aspect(切面)

文章目录 前言一、过滤器 (Filter) 基本用法二、拦截器 (Interceptor) 基本用法三、Aspect(切面)的基本用法总结 前言 Filter 是servlet层面的&#xff0c;由Servlet容器(如Tomcat)支持&#xff0c;只能在web程序中使用&#xff0c;实现了javax.servlet.Filter接口 Intercept…

NATAPP-内网穿透工具----下载与配置

NATAPP-内网穿透工具 基于ngrok的国内高速内网穿透服务&#xff0c;natapp提供了一种便利的方式&#xff0c;使得开发和测试过程更加高效&#xff0c;尤其是在需要进行远程调试或展示时。无论是进行web开发、微信和支付宝的本地开发调试&#xff0c;还是简单地从外部网络访问家…

Maya 2024 mac/win版:创意无界,设计新生

Maya 2024是一款由Autodesk推出的业界领先的三维计算机图形软件&#xff0c;广泛应用于电影、游戏、广告等创意产业。这款软件以其强大的功能和卓越的性能&#xff0c;为艺术家们提供了一个实现创意梦想的平台。 Maya 2024 mac/win版获取 在建模方面&#xff0c;Maya 2024提供…

作者推荐 | 探索分析从起源到现今的巅峰之旅(MySQL存储模型)

探索分析从起源到现今的巅峰之旅 背景介绍MySQL内部组织与结构MySQL的数据层次和关系InnoDB的数据存储模型数据记录的基本单元 — 行页目录&#xff08;Page Directory&#xff09;文件头&#xff08;File Header&#xff09;决定页面间的关联方式数据页头&#xff08;Page Hea…

大模型应用开发技术:Multi-Agent框架流程、源码及案例实战(一)

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 基于 LlaMA…

QT:QT中的默认代码 QT 创建控件的两种方式

目录 QT中的默认代码 新项目的结构 主函数 wiget类的声明文件.h wiget类的定义文件.cpp form file界面文件 .pro文件 QT 创建控件的两种方式 通过ui界面创建控件 通过代码方式创建控件 QT中的默认代码 新项目的结构 主函数 基本概念&#xff1a;Qt 在创建的一个 Wi…

AI在线创作歌曲智能绘画对话三合一源码系统 前后端分离 带完整的安装代码包以及搭建教程

系统概述 在数字化时代背景下&#xff0c;艺术与技术的融合正以前所未有的速度推进&#xff0c;催生出一系列创新应用。为了满足创作者对多元化、高效能创作工具的需求&#xff0c;我们自豪地推出了“AI在线创作歌曲、智能绘画对话三合一源码系统”。这一系统不仅实现了音乐、…

白酒:茅台镇白酒的消费者教育计划与推广活动

云仓酒庄豪迈白酒&#xff0c;作为茅台镇的品牌&#xff0c;一直以来都非常重视消费者教育和推广活动。这些计划和活动的目的在于提高消费者对豪迈白酒的认知度和接受度&#xff0c;同时培养消费者的品鉴能力和酒文化素养。 首先&#xff0c;云仓酒庄豪迈白酒通过开展品鉴活动来…

独立游戏之路:Tap篇 -- Unity 集成 TapTap 广告详细步骤

Unity 集成 TapADN 广告详细步骤 前言一、TapTap 广告介绍二、集成 TapTap 广告的步骤2.1 进入广告后台2.2 创建广告计划2.3 选择广告类型三、代码集成3.1 下载SDK3.2 工程配置3.3 源码分享四、常见问题4.1 有展现量没有预估收益 /eCPM 波动大?4.2 新建正式媒体找不到预约游戏…

六西格玛培训:一次学习,终身受益!

六西格玛培训&#xff0c;这个听起来就充满智慧的名字&#xff0c;其实是一种追求卓越的管理哲学。它的核心理念在于减少缺陷、降低变异&#xff0c;以提升企业的运营效率和质量水平。对于我们这些渴望在职场中更上一层楼的人来说&#xff0c;六西格玛培训无疑是一把打开成功之…

太速科技-基于XCVU9P+ C6678的100G光纤的加速卡

基于XCVU9P C6678的100G光纤的加速卡 一、板卡概述 二、技术指标 • 板卡为自定义结构&#xff0c;板卡大小332mmx260mm; • FPGA采用Xilinx Virtex UltralSCALE 系列芯片 XCVU9P; • FPGA挂载4组FMC HPC 连接器; • 板载4路QSPF&#xff0c;每路数据速…

硕思闪客精灵软件最新版下载及详细安装教程

闪客精灵&#xff08;Sothink SWF Decompiler&#xff09;是一款先进的SWF反编译软件&#xff0c;它不但能捕捉、反编译、查看和提取Shock Wave Flash影片&#xff08;.swf和.exe格式文件&#xff09;&#xff0c;而且可以将SWF格式文件转化为FLA格式文件。 安 装 包 获 取 地 …

Python Django 实现教师、学生双端登录管理系统

文章目录 Python Django 实现教师、学生双端登录管理系统引言Django框架简介环境准备模型设计用户认证视图和模板URL路由前端设计测试和部署获取开源项目参考 Python Django 实现教师、学生双端登录管理系统 引言 在当今的教育环境中&#xff0c;数字化管理系统已成为必不可少…

C# 通过Win32API设置客户端系统时间

在日常工作中&#xff0c;有时可能会需要获取或修改客户端电脑的系统时间&#xff0c;比如软件设置了Licence有效期&#xff0c;预计2024-06-01 00:00:00到期&#xff0c;如果客户手动修改了客户端电脑时间&#xff0c;往前调整了一年&#xff0c;则软件就可以继续使用一年&…

掌控未来:用决策树算法揭秘胜利者的必胜策略!

掌控未来&#xff1a;用决策树算法揭秘胜利者的必胜策略&#xff01; 一、引言1.1. 决策树的定义1.2. 发展历程1.3. 当前应用概况1.4. 本文内容安排 二、决策树的基本概念2.1 节点和叶节点2.2 决策树的结构结构图示不同结构的决策树 三、决策树的算法原理3.1 基本思想3.2 核心算…