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 组件允许水平方向滚动:
