引言

最近发现一些博客类小程序的开发者不懂得处理代码高亮细节问题，尤其是不懂得更新代码样式库和自动插入code标签。

I 文章代码高亮的实现

采用开源组件mp-html进行实现,高亮功能依赖于prismjs，默认配置中仅支持 html、css、clike、javascript 变成语言，如果想要更支持更多语言可去prismjs网站下载对应的 prism.min.js 和 prism.css 并替换 plugins/highlight/ 目录下的文件。

使用 HBuilder X 开发时，可以直接通过插件市场导入。

  <view class="data-view">
   <mp-html :tag-style="tag_style" :content="detailData.content.rendered" :container-style="container_style"
    selectable="true" > 内容疯狂加载ing...</mp-html>
  </view>

支持语言的样式库

​

小程序文章样式小知识--代码高亮_h5


1.1 mp-html的用法

  1. 小程序页面支持代码高亮


wxml

<mp-html  content="{{html}" </mp-html>

符合以下pre格式的将被高亮

<!-- pre 中内含一个 code，并在 pre 或 code 的 class 中设置 language- -->

HBuilderX 2.5.5+ 可以通过 easycom 自动引入

  1. Wordpress文章页面支持代码高亮

目前我的小程序是通过wordpress的API构建的，因此让文章页面支持代码高亮是很有必要的。

方法：wordpress主题引入mp-html 其他方法：推荐使用Code Prettify插件

1.2 更新支持语言样式库

mp-html组件 默认支持：html、css、c-like、js

通过更新PrismJS，来引入更多的样式库

小程序文章样式小知识--代码高亮_h5_02

II 自动插入代码块code标签

2.1 方式一：在得到文章数据之后使用正则添加code标签

小程序端实现自动插入代码块code标签​​<pre><code>​​，采用正则添加class

缺点：写死的语言样式库，​​class="language-css"​​

         .replace(/<code([\s\w"=/.:;]+)((?:(style="[^"]+")))/ig, '<code')
         .replace(/<code([\s\w"=/.:;]+)((?:(class="[^"]+")))/ig, '<code')
         .replace(/<code>/ig, '<code class="language-css">')

修正方式：优化正则添加class，如果已经存在特定语言的class，则不添加class。

2.2 方式二：在发布wp文章时自动插入代码块code标签

在发布wp文章时自动插入代码块code标签：推荐使用wp插件: ​​WP Githuber MD​​

2.3 小结

不推荐在小程序侧自动插入代码块标签​​<pre><code>​​，推荐使用wp插件自动生成code标签，代码库的标签应该是发布wp文章时自动插入，而非在拿到接口数据之后强制写死css样式。

如果在拿到数据后自动插入code标签，不是写死特定语言样式，那样也是可以的。 推荐一个自动插入标签的wp插件: WP Githuber MD

错误代码示例：

// 文章数据
   posdData: function() {
    var that = this;
    uni.request({
       url: API + '/wp-json/wp/v2/posts/' + that.posdCenterID,
       success: (res) => {
        that.detailData = res.data;
        that.posdCenterTitle = res.data.title.rendered;
        that.posTag = res.data.tags[0];
        that.postID = ;
        
        // 赋值动态框
        that.percent = 100;
        
        // 正则添加class
        that.contentDate = res.data.content.rendered
         .replace(/<h1([\s\w"=/.:;]+)((?:(style="[^"]+")))/ig, '<h1')
         .replace(/<h1([\s\w"=/.:;]+)((?:(class="[^"]+")))/ig, '<h1')
         .replace(/<h1>/ig, '<h1 class="h1">')

         .replace(/<h2([\s\w"=/.:;]+)((?:(style="[^"]+")))/ig, '<h2')
         .replace(/<h2([\s\w"=/.:;]+)((?:(class="[^"]+")))/ig, '<h2')
         .replace(/<h2>/ig, '<h2 class="h2">')

         .replace(/<h3([\s\w"=/.:;]+)((?:(style="[^"]+")))/ig, '<h3')
         .replace(/<h3([\s\w"=/.:;]+)((?:(class="[^"]+")))/ig, '<h3')
         .replace(/<h3>/ig, '<h3 class="h3">')

         .replace(/<h4([\s\w"=/.:;]+)((?:(style="[^"]+")))/ig, '<h4')
         .replace(/<h4([\s\w"=/.:;]+)((?:(class="[^"]+")))/ig, '<h4')
         .replace(/<h4>/ig, '<h4 class="h4">')

         .replace(/<h5([\s\w"=/.:;]+)((?:(style="[^"]+")))/ig, '<h5')
         .replace(/<h5([\s\w"=/.:;]+)((?:(class="[^"]+")))/ig, '<h5')
         .replace(/<h5>/ig, '<h5 class="h4">')

         .replace(/<h6([\s\w"=/.:;]+)((?:(style="[^"]+")))/ig, '<h6')
         .replace(/<h6([\s\w"=/.:;]+)((?:(class="[^"]+")))/ig, '<h6')
         .replace(/<h6>/ig, '<h6 class="h6">')

         .replace(/<code([\s\w"=/.:;]+)((?:(style="[^"]+")))/ig, '<code')
         .replace(/<code([\s\w"=/.:;]+)((?:(class="[^"]+")))/ig, '<code')
         .replace(/<code>/ig, '<code class="language-css">')

see also

如果您有更好的实现方式欢迎关注​​#公众号：iOS逆向​​交流。

本人最近也上线了​​# 小程序：iOS逆向​​，只为你呈现有价值的信息，专注于移动端技术研究领域。