微信小程序

2024-07-14 20:47:11| 来源: 网络整理| 查看: 265

文章目录 ⭐ 前言⭐ 复制代码功能实现基于towxml渲染markdown 定位h2w__code language-css 类名下是渲染的代码块查找样式的判断源码attr注入属性用来判断是否是代码块 code复制代码样式及事件绑定效果 ⭐ 结束

⭐ 前言

大家好，我是yma16，不止前端，本文将介绍微信小程序中 markdown的代码复制功能实现。往期微信小程序文章小程序自定义微信昵称和头像小程序制作markdown博客小程序结合chatgpt制作聊天页面小程序组件传值小程序复制到粘贴板的功能实现

⭐ 复制代码功能实现基于towxml渲染markdown 定位

因为是基于towxml渲染的markdown 通过渲染元素快速定位代码块 code 的位置在这里插入图片描述通过选择元素，可找到class 名称h2w__viewParent即为渲染代码块的元素布局。

h2w__code language-css 类名下是渲染的代码块

定位元素的代码块渲染class 在这里插入图片描述

查找样式的判断源码

通过new mardown的过程我们找到class是通过attr的class注入

在这里插入图片描述

attr注入属性用来判断是否是代码块 code

区分的标志：tag是否为code使用includes判断 e.tag.includes(‘code’)

// 代码块判断 if(e.tag.includes('code')||item.name.includes('code')||attrs.class.includes('code')){ attrs.isCodeBlock=true attrs.element=e } 复制代码样式及事件绑定

样式

【本文地址】

公司简介

联系我们

今日新闻