重磅打造的小程序学习路径课，从微信小程序到微信云开发体系化的学习，带来更加顺畅的学习体验。

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