uniapp&微信小程序markdown&latex

一、需求背景

希望在uniapp&微信小程序中支持markdown渲染,包括latex数学公式、代码渲染等等。

目前最好用、使用最广的库就是towxml

towxml仓库地址:github.com/sbfkcel/tow...

二、安装使用

文本介绍所使用的环境:uniapp、vite、vue3、ts。

本文主要介绍配置markdown、latex数学公式、流程图。

towxml仓库中有使用方式,具体步骤如下:

  • 克隆项目到本地
    • git clone https://github.com/sbfkcel/towxml.git
  • 安装构建依赖
    • npm installyarn
  • 编辑配置文件towxml/config.js
    • 根据自行要求,仅保留你需要的功能即可(配置中有详细注释)
  • 运行 npm run buildyarn run build即可

新构建出来的文件在dist目录下,将dist目录复制到你的小程序项目中并将目录名称改为towxml即可。本文复制到wxcomponents目录,最好跟本文保持一致。

  • 编辑/wxcomponents/towxml/decode.json 文件,将路径改为相对路径。

    json 复制代码
      {
        "component": true,
        "usingComponents": {
          "decode": "./decode",
          "latex": "./latex/latex",
          "table": "./table/table",
          "todogroup": "./todogroup/todogroup",
          "yuml": "./yuml/yuml",
          "img": "./img/img"
        }
      }
  • 配置latex数学公式和yum流程图解析引擎

    • 服务器需要安装nodejs 8.0+

    • 克隆markdown-server项目git clone https://github.com/sbfkcel/markdown-server

    • 安装依赖 npm i

    • 运行服务 node index.js

    • 访问服务 http://127.0.0.1:8001?tex=hello

      • 如果有显示Hello字眼则说明服务部署成功
      • 端口号可打开index.js文件自行修改(文件最后一行)
    • 将服务地址 http://服务器IP:8001?texhttp://服务器IP:8001?yuml填写到towxml/config.js中
      *

      css 复制代码
        // 数学公式解析API
        latex:{
            api:'http://127.0.0.1:8001/latex/?tex'
        },
      
        // yuml图解析APPI
        yuml:{
            api:'http://127.0.0.1:8001/yuml/?yuml'
        },
  • uniapp环境的话需要将towxml/index.js函数导出方式改以下

    ini 复制代码
    export const useTowxml = (str,type,option)=>{
       option = option || {};
       let result;
       switch (type) {
           case 'markdown':
               result = parse(md(str),option);
           break;
           case 'html':
               result = parse(str,option);
           break;
           default:
               throw new Error('Invalid type, only markdown and html are supported');
           break;
       };
       return result;
    };
  • 引用towxml组件

    json 复制代码
    {
      "path": "detail/detail",
      "style": {
        "usingComponents": {
          "towxml": "/wxcomponents/towxml/towxml"
        }
      }
    }
  • 在页面中使用

    • 导入组件 import {useTowxml} from '@/wxcomponents/towxml/index.js';
    • 封装函数 const useMarkdown = (value: string) => useTowxml(value || '', 'markdown')
    • 在模板中使用 <towxml :nodes="useMarkdown(currentQuestion.analysis)"/>
  • 重新编译即可,若不生效,请清除缓存重新打开微信开发者工具。

总结

本文主要介绍了微信小程序中使用towxml库来支持渲染markdown内容。 渲染latex和yuml时需要引用第三方引擎markdown-server解析,需要在towxml中配置好解析地址。 该引擎支持docker部署。

相关推荐
Jagger_16 分钟前
Cursor + Apifox MCP:告别手动复制接口,AI 助你高效完成接口文档开发
前端
IT_陈寒32 分钟前
Redis性能优化:5个被低估的配置项让你的QPS提升50%
前端·人工智能·后端
Hilaku39 分钟前
重新思考CSS Reset:normalize.css vs reset.css vs remedy.css,在2025年该如何选?
前端·css·代码规范
袁煦丞1 小时前
一图看懂Docker管理 Portainer:cpoar内网穿透实验室第652个成功挑战
前端·程序员·远程工作
右子1 小时前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
入秋2 小时前
Three.js后期处理实战:噪点 景深 以及色彩调整
前端·javascript·three.js
Asort2 小时前
JavaScript设计模式(七)——桥接模式:解耦抽象与实现的优雅之道
前端·javascript·设计模式
golang学习记2 小时前
从0死磕全栈之Next.js 应用中的认证与授权:从零实现安全用户系统
前端
苏打水com2 小时前
携程前端业务:在线旅游生态下的「复杂行程交互」与「高并发预订」实践
前端·状态模式·旅游
Darenm1112 小时前
深入理解CSS BFC:块级格式化上下文
前端·css