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