1、组件使用:

  之前微信小程序的富文本渲染组件用的wxParse,对普通富文本确实可以,但是对于代码格式pre标签则无法使用。

  下面这个html2wxml很不错,可以支持代码高亮。

  详细文档:https://github.com/qwqoffice/html2wxml

2、Java版自行搭建服务

  文档:https://github.com/mumengmeng/html2wxml4J

3、遇到问题:html2wxml代码块格式化在ios下字体过大问题

  html2wxml富文本代码格式化在安卓下字体正常,但是在ios下,字体过大,设置字体!important都无法生效。

  最后找了很多方法都没有找到原因,最后将默认代码高亮样式修改一下即可。

// 代码高亮样式改为tomorrow
<htmltowxml text="{{content}}" highlightStyle="tomorrow" ></htmltowxml>

微信小程序富文本渲染组件html2wxml及html2wxml代码块格式化在ios下字体过大问题的更多相关文章

  1. [微信小程序] 微信小程序富文本-wxParse的使用

    最近小程序蛮火的,公司要做于是学了一点点小程序 不知道你们有没有遇到过这种问题: 从公司服务器获取的文章内容是有HTML标签格式的一段内容,但是微信是不支持这些标签的,怎么办呢? 1.一般网站后台的文 ...

  2. [转]wxParse-微信小程序富文本解析组件

    本文转自:https://github.com/icindy/wxParse 基本使用方法 Copy文件夹wxParse - wxParse/ -wxParse.js(必须存在) -html2json ...

  3. 微信小程序-富文本解析插件wxParse基础使用及问题解决

    一.插件准备 在github上可以直接下载该插件:https://github.com/icindy/wxParse 二.基本使用 1.将插件导入项目: 将wxParse文件夹放在项目目录下,如图: ...

  4. 微信小程序富文本中的图片大小超出屏幕

    这个问题我在小程序社区中提的,后来有个帮我回答了这个问题,我试了一下可以. 解决办法是过滤富文本内容,给图片标签添加一个样式,限制图片的最大宽度. replace(/\<img/gi,   '& ...

  5. 微信小程序 富文本插件 循环渲染方式

    感谢GitHub https://github.com/icindy/wxParse/wiki/wxParse%E5%A4%9A%E6%95%B0%E6%8D%AE%E5%BE%AA%E7%8E%AF ...

  6. 适用于 Mpvue 的微信小程序富文本解析自定义组件

    废话不多说,直接上方法: 首先 npm 安装 mpvue-wxparse npm i mpvue-wxparse 接下来:使用 <template> <div> <wxP ...

  7. 微信小程序富文本

    <div class="weui-panel__bd pad-all fs13 " > <rich-text nodes="{{detail.conte ...

  8. 微信小程序rich-text 文本首行缩进和图片居中

    微信小程序开发使用rich-text组件渲染html格式的代码,常常因为不能自定义css导致文本不能缩进,以及图片不能居中等问题,这里可以考虑使用js的replace方法,替换字符串,然后在渲染的同时 ...

  9. 微信小程序的页面渲染(if/for)

    下面,粗略的介绍一下微信小程序的条件渲染.列表渲染.数据绑定等,详细的内容大家可以去看微信小程序的API,在此只做简单描述,希望能帮助到大家 条件渲染 <!--wxml--> <vi ...

随机推荐

  1. TP5.1:request请求对象(使用四种方式获取)

    准备: 在index/controller下创建一个名为requests.php的文件(注意:不要起名为request,因为它是关键字,不被允许起名) 动态方法和静态方法的区别: 静态方法:publi ...

  2. C++ code:函数指针数组

    函数指针作为一种数据类型,当然可以作为数组的元素类型.例如,要实现用菜单来驱动函数调用的程序框架,则用函数指针数组来实现就比较容易维护. #include<iostream> using ...

  3. 性能测试二十三:环境部署之Redis安装和配置

    redis:非关系型数据库,内存数据库,no-sql典型,   数据存放在内存中,一断电或者关闭就没有了 mysql.oracle.sqlserver···是关系型数据库,数据存放在磁盘中 一个Red ...

  4. 性能测试九:jmeter进阶之beanshell的使用+断言

    一.使用 BeanShell使用方式一 BeanShell面板上写脚本 // 从vars中获取用户定义的参数,并转换为int类型 int p_skuId = Integer.parseInt(vars ...

  5. python+selenium四:iframe查看、定位、切换

    iframe是HTML里面嵌套HTML的一种框架 1.查看iframe 1.Top Window:可直接定位 2.iframe#i:说明此元素在iframe上 3.iframe显示为空:(id或nam ...

  6. [转] Optimizely:在线网站A/B测试平台

    Optimizely:在线网站A/B测试平台是一家提供 A/B 测试服务的公司.A/B 测试能够对比不同版本的设计,选取更吸引用户眼球的那一款,从而带来更为优化的个人体验.让网站所有者易于对不同版本的 ...

  7. 白化(Whitening): PCA 与 ZCA (转)

    转自:findbill 本文讨论白化(Whitening),以及白化与 PCA(Principal Component Analysis) 和 ZCA(Zero-phase Component Ana ...

  8. 033 关于YARN的HA

    一:准备 1.规划 namenode               namenode ZKFC ZKFC journalnode        journalnode               jou ...

  9. Java Swing提供的文件选择对话框 - JFileChooser

    JFileChooser()           构造一个指向用户默认目录的 JFileChooser. JFileChooser(File currentDirectory)           使 ...

  10. linux学习之使用fdisk命令进行磁盘分区(八)

    linux下使用fdisk命令进行磁盘分区 目录 分区类型 分区方法表示 文件系统 fdisk命令分区过程 分区类型 主分区:总共最多只能分四个 扩展分区:只能有一个,也算作主分区的一种,也就是说主分 ...