这一个星期一直再想办法解决小程序里面代码显示的问题,刚刚开始使用的是wxparse的开源方法,https://github.com/icindy/wxParse,wxParse是微信小程序富文本解析组件,支持Html及markdown转wxml可视化,我利用markdown生成的样式,然后填充进去,发现代码显示这块还是不行,markdown在线编辑地址,http://md.aclickall.com/,

wxparse最终的效果图

左边是小程序的,右边的是markdown网页上的编辑效果。

微信小程序之代码高亮-子客ZOG

在后来使用github上的towxml,网址https://github.com/sbfkcel/towxml

 

Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。

用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。

样式和markdown还是有很大的区别,毕竟是作者自己写的,但是代码可以实现高亮,效果图

微信小程序之代码高亮-子客ZOG

步骤:

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

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

2. 在小程序app.js中引入库

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

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

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

4. 在小程序对应的js中请求数据

//pages/index.js

const app = getApp();
Page({
data: {
//article将用来存储towxml数据
article:{}
},
onLoad: function () {
const _ts = this;

//请求markdown文件,并转换为内容
wx.request({
url: 'http://xxx/doc.md',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: (res) => {
//将markdown内容转换为towxml数据
let data = app.towxml.toJson(res.data,'markdown');

//设置文档显示主题,默认'light'
data.theme = 'dark';

//设置数据
_ts.setData({
article: data
});
}
});
}
})

5. 引入对应的WXSS

/**pages/index.wxss**/

/**基础风格样式**/
@import '/towxml/style/main.wxss';

/**如果页面有动态主题切换,则需要将使用到的样式全部引入**/

/**主题配色(浅色样式)**/
@import '/towxml/style/theme/light.wxss';

/**主题配色(深色样式)**/
@import '/towxml/style/theme/dark.wxss';

OK,大功告成~~

事件绑定
towxml支持以下事件绑定,可自行根据需要为内容添加绑定事件。(不支持bindtap等事件简写方法)
'bind:touchstart',
'bind:touchmove',
'bind:touchcancel',
'bind:touchend',
'bind:tap',
'bind:longpress',
'bind:longtap',
'bind:transitionend',
'bind:animationstart',
'bind:animationiteration',
'bind:animationend',
'bind:touchforcechange',

'capture-bind:touchstart',
'capture-bind:touchmove',
'capture-bind:touchcancel',
'capture-bind:touchend',
'capture-bind:tap',
'capture-bind:longpress',
'capture-bind:longtap',
'capture-bind:transitionend',
'capture-bind:animationstart',
'capture-bind:animationiteration',
'capture-bind:animationend',
'capture-bind:touchforcechange'

Page({
data: {
isloading: true,
article: {}
},
onLoad: function () {
const _ts = this;

//将markdown内容转换为towxml数据,交将当前页面对象传入以创建默认事件对象
let articleData = app.towxml.toJson('<div data-name="button" data-id="button1">测试一个可点击的元素</div>', 'html', _ts);

//自定义事件,格式为`event_`+`绑定类型`+`_`+`事件类型`
//例如`bind:touchstart`则为:
this['event_bind_touchstart'] = (event)=>{
console.log(event.target.dataset.name); // 打印出"button"
};

//设置文章数据,并清除页面loading
_ts.setData({
article: articleData,
isloading: false
});
}
})

支持以下自定义属性
小程序的data属性允许从元素event.target.dataset中获取,towxml提供以下自定义属性,以便于自行处理交互扩展。

'data-url'
'data-src'
'data-alpha'
'data-data'
'data-id'
'data-name'