让小程序支持代码高亮

对于编程技术类的小程序来说,在文章会有很多代码,那么代码高亮就是一个文章显得很出色的需求了。代码高亮功能的实现,主要是依靠小程序里对富文本内容的解析。对于富文本解析,微慕小程序专业版以前采用的开源的wxParse组件,但这个组件不支持代码高亮,且二次开发的难度较大。从微慕小程序专业版v3.8.0开始引入了mp-html组件,该组件提供对代码高亮显示的支持。

在小程序里通过mp-html实现代码高亮方式如下:

1.在小程序里引入mp-html

将mp-html的源码中对应平台的代码包(dist/platform)拷贝到 components 目录下,更名为 mp-html
在需要使用页面的 json 文件中添加如下代码:

{
  "usingComponents": {
    "mp-html": "/components/mp-html/index"
  }
}

2.在小程序里使用mp-html

1.在需要使用页面的 wxml 文件中添加

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

2.在需要使用页面的 js 文件中添加

Page({
  onLoad () {
    this.setData({
     html:'<div>Hello World!</div>'
    })
  }
})

3.在mp-html里引入代码高亮highlight插件

在mp-html的源代码里tools/config.js 中的 plugins 中启用highlight插件,设置完成后,可通过项目提供的命令行工具生成新的组件包。

编辑 plugins/highlight/config.js ,可以选择是否需要以下功能:

copyByLongPress 是否需要长按代码块时显示复制代码内容菜单
showLanguageName 是否在代码块右上角显示语言的名称
showLineNumber 是否在左侧显示行号

引入本插件后,html 中符合以下格式的 pre 将被高亮处理:

<!-- pre 中内含一个 code,并在 pre 或 code 的 class 中设置 language -->
<pre><code class="language-css">
p { color: red }
</code></pre>

本插件的高亮功能依赖于prismjs,默认配置中仅支持 html、css、c-like、javascript 变成语言,如果需要更多语言下需要去prismjs网站下载对应的 prism.min.js 和 prism.css 并替换 plugins/highlight/ 目录下的文件。

目前微慕专业版小程序里代码高亮支持的编程语言是TIOBE排名前20的编程语言,比如C 、Java、Python 、C++、C Sharp、PHP等。

4.在wordpress里文章页面支持代码高亮

微慕小程序是通过wordpress的api构建的,因此如果在wordpress文章页面也同时支持代码高亮就完美了,做到这个其实比较简单,只要把mp-html目录下plugins/highlight/prism.min.js 和 prism.css 引入到wordpress的主题模板即可。

如果在wordpress的文章里代码高亮支持:显示行号,复制代码,显示语言,可以去prismjs下载相应的插件。
1.显示编程语言的prismjs插件:https://prismjs.com/plugins/show-language/
2.显示行号的prismjs插件:https://prismjs.com/plugins/line-numbers/
3.复制代码的prismjs插件:https://prismjs.com/plugins/copy-to-clipboard/

下载上述插件后,引入到wordpress主题里,在code 便签里加入data-prismjs-copy 和data-prismjs-copy-success,就可以支持上述三个功能了。

示例代码如下:

<pre><code 
class="language-html line-numbers" 
data-prismjs-copy="复制代码" 
data-prismjs-copy-success="代码已复制">
</code></pre>

function get_qq_video_url($vid){
    $url = 'https://vv.video.qq.com/getinfo?vids='.$vid.'&platform=101001&charge=0&otype=json';
    $json = file_get_contents($url);
    preg_match('/^QZOutputJson=(.*?);$/',$json,$json2);
    $tempStr = json_decode($json2[1],true);
    $vurl = 'https://ugcws.video.gtimg.com/'.$tempStr['vl']['vi'][0]['fn']."?vkey=".$tempStr['vl']['vi'][0]['fvkey'];
    return $vurl;
}




function get_qq_video($url){
    $vcontent ='';
    preg_match('/https\:\/\/v.qq.com\/x\/(\S*)\/(\S*)\.html/',$url,$matches);
    if($matches){
        $vids=$matches[2];
        $videoUrl= get_qq_video_url($vids);
    }
    return '<video src="'.$videoUrl.'" poster="https://puui.qpic.cn/qqvideo_ori/0/'.$vids.'_496_280/0" controls="controls" width="100%"></video>';
}

扩展链接:
1.购买微慕专业版

2.购买微慕增强版



微信扫描下方的二维码阅读本文

那年今日

2023-08-12 美丽的代价 (0 个评论)

2017-08-12 优秀WordPress版微信小程序推荐(一) (13 个评论)

2009-08-12 致女儿(十):疼爱与溺爱 (6 个评论)

让小程序支持代码高亮》有7个想法

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注