Inspired by: https://github.com/FormidableLabs/prism-react-renderer 突然想用 Prism 为小程序开发一个语法高亮器。采用小程序的 抽象节点 功能写了一个通用的版本。 为了该组件可以正常工作，我们还需要一个渲染器组件—highlight-renderer 组件, which 只需要接收 tokenLines 属性就行了: renderer/index.wxml [代码]<block wx:if="{{tokenLines}}"> <view wx:for="{{tokenLines}}" wx:for-item="line" wx:for-index="i"> <text class="line-number">{{i+1}}</text> <text wx:for="{{line}}" wx:for-item="token" class="token token--{{token.type}}" >{{token.content}}</text> </view> </block> [代码] 最后我们在首页之中调用这两个组件: index:wxml [代码]<scroll-view style="align-self:stretch;margin-top:1em" scroll-x> <highlight-component language="js" code="{{code}}" generic:render="highlight-renderer" /> </scroll-view> [代码] 在加上相应的样式，就可以渲染代码了。效果大概是这样的，通过 scroll-view 组件允许水平方向滚动: [图片] 代码片段: https://developers.weixin.qq.com/s/vVssgTmL7Hcf

[图片] 系统：WIN10 版本号：1.03.2009140 框架类型：小程序

原生小程序根据当前版本自动切换 [代码]开发版本、体验版本、正式版本[代码] 接口地址 使用微信官方提供的Api 完美解决上传发布手动修改接口地址 wx.getAccountInfoSync 代码实现 [图片] 源代码（方便复制粘贴）0_0 [代码]// 获取小程序当前版本信息 https://developers.weixin.qq.com/miniprogram/dev/api/open-api/account-info/wx.getAccountInfoSync.html // 自动根据版本切换接口请求地址 const { miniProgram: { envVersion } } = wx.getAccountInfoSync(); let url = ''; switch (envVersion) { case 'develop': url = `${defaultConfig.devUrl}${params.url}`; break; case 'trial': url = `${defaultConfig.devUrl}${params.url}`; break; case 'release': url = `${defaultConfig.prodUrl}${params.url}`; break; default: url = `${defaultConfig.baseUrl}${params.url}`; break; } console.log(url, 'url'); console.log(envVersion, 'envVersion'); [代码]