微信小程序处理代码高亮

OECOM

发布于 2020-07-01 17:15:35

8260

发布于 2020-07-01 17:15:35

文章被收录于专栏：OECOMOECOM

2018-08-06 14:59:18

小程序有自己的一套语法代码，与传统的html代码不太一致，这时就需要用到了文本解析工具，之前用的一直是一种解析方式是wxParse工具解析。但是这个工具没法实现代码的高亮，总是在一行显示。经过在网上的查找发现了一个新的库，就是towxml。它是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库

使用

1.克隆TOWXML到小程序根目录

git clone https://github.com/sbfkcel/towxml.git

如上图，去除demo和.git文件夹，将towxml整个文件夹复制到你的小程序项目的根目录中去。 2.在app.js中引用，方便在其他页面的使用。

//app.js
const Towxml = require('/towxml/main'); //引入towxml库
App({
    globalData:{
    towxml:new Towxml() //创建towxml对象，供小程序页面使用
    }
    onLaunch: function () {},
})

3.引入对应的WXSS

/**pages/index.wxss**/
/**基础风格样式**/
@import '/towxml/style/main.wxss';
/**如果页面有动态主题切换，则需要将使用到的样式全部引入**/
/**主题配色（浅色样式）**/
@import '/towxml/style/theme/light.wxss';
/**主题配色（深色样式）**/
@import '/towxml/style/theme/dark.wxss';

4.在小程序页面文件中引入模版

<!--pages/index.wxml-->
<!--引入towxml模版入口文件，并使用模版-->
<import src="/towxml/entry.wxml"/>
<template is="entry" data="{{...article}}"/>

5.数据填写

const app = getApp();
Page({
    data: {
        //article将用来存储towxml数据
        article:{}
    },
    onLoad: function () {
        const _ts = this;
        //请求markdown文件，并转换为内容
        wx.request({
            url: 'http://xxx/article',
            header: {
                'content-type': 'json'
            },
            success: (res) => {
                //将markdown内容转换为towxml数据
                let data = app.globalData.towxml.toJson(res.data,'markdown');
                //设置文档显示主题，默认'light'
                data.theme = 'dark';
                //设置数据
                _ts.setData({
                    article: data
                });
            }
        });
    }
})

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018-08-06，如有侵权请联系 cloudcommunity@tencent.com 删除

小程序