代码高亮那个有个小问题,

[Y-A-K-E]

使用平台
uni-app

问题描述
参考你的文档,引入prismjs,
如果prism网站生成prism的时候,勾选了 复制代码 的功能,
那么将会抛出异常.

Module not found: Error: Can't resolve 'clipboard' in 'F:\uni_app\blog_mini\utils'

html 代码

[Y-A-K-E]

不知道我哪里不对,去掉clipboard也没成功运行.

config.js

/* 配置文件 */
const Prism = require('@/utils/prism.js');
var cfg = {
	// 出错占位图
	errorImg: null,
	// 过滤器函数
	filter: null,
	// 代码高亮函数
	highlight: function(content, attrs) {
	  content = content.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/quot;/g, '"').replace(/&amp;/g, '&'); // 替换实体编码
	  attrs["data-content"] = content; // 记录原始文本，可用于长按复制等操作
	  switch (attrs[lan]) {
		case "javascript":
		case "js":
		  return Prism.highlight(content, Prism.languages.javascript, "javascript");
		case "html":
		  return Prism.highlight(content, Prism.languages.html, "html");
		case "css":
		  return Prism.highlight(content, Prism.languages.css, "css");
		default:
		  return content;
	  }
	} ,

[Y-A-K-E]

好像还是不行的样子..

---

原来我只做了微信小程序版,
用的https://github.com/csonchen/wxParse HTML解析库.
这个,他移植了https://highlightjs.org/ 这个解析库

预览图

我感觉还不错,他好像也做了npm包,但是我弄到uni-app不行.

大佬你看能不能搬运过来....

[jin-yufeng]

用我发的这个 zip 不行吗？我这里是可以的

[Y-A-K-E]

不好意思,之前只是看了下H5不行,我那个时候没测试小程序.

刚刚试了下小程序是正常的,H5还是不行.

[Y-A-K-E]

对了,qq小程序实测有点问题,主要是qq小程序好像不支持css属性选择器. 凡是样式带 方括号的 全都抛出异常.删掉就可以解析了.

[jin-yufeng]

现在用 highlight 插件 就可以了，大概方法如下：

1. 获取完整组件包

   npm install mp-html

2. 编辑 tools/config.js 中的 plugins 项，选中 highlight

3. 编辑 plugins/highlight/config.js 选择需要的功能（可选）

4. 如果需要使用默认语言外的语言，前往 prismjs 下载需要的 prism.min.js 替换 plugins/highlight/prism.min.js（可选）

5. 生成新的组件包

   npm install
   npm run build:uni-app

6. 拷贝 dist/uni-app 中的内容到项目根目录

注意组件名和一些属性名有变化，参考 更新指南

[Y-A-K-E]

大佬,我按你的方法更新了,实际使用中遇到两个问题.100%复现.

首先,HTML解析是正常的.显示也是正常.

问题点1

H5放大预览图片正常.
qq小程序,微信小程序预览大图无限转圈. 任意图片都是.

另外一个问题就是样式的问题,问题不大.

如果启用了代码高亮的行号 和语言显示. 那么排版会有一些问题.
H5和小程序都有这个问题.

[jin-yufeng]

第一个你放个百度的图片试试

<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg">

我试了一下是可以预览的
模拟器上出不来的话去真机上试试，也可以直接放在 wx.previewImage 里试试能不能预览

第二个确实有问题，我改一下

[Y-A-K-E]

换你那个百度的图片确实可以正常使用.

我图片是可以外链的,放大前是正常显示的,只是放大后无限转圈.麻烦帮忙看看.谢谢

https://r.photo.store.qq.com/psc?/V13iVwZo2obvUj/l8V4kN5EKtnl2fKnrChMJ7iLsTXumkVF79pWChwJWUc6sTQw8nYohkg2pDPzOHNBkjBSwRTChqtZ3O62GyYQ!!/mnull&bo=HAHhARwB4QERCT4!&rf=photolist&t=5/r/_yake_qzoneimgout.png

[Y-A-K-E]

不对,我单独加HTML代码我这个图片也是正常的.

[Y-A-K-E]

前面说的样式问题,还有一个情况仅仅H5下会有.

如果启用了显示语言,
如果代码某行内容比较长,(出现了横向滚动条.)

那么那个代码语言的样式有点异常.

"javascript"字,会跟随横向滚动条.

微信小程序和QQ小程序 是正常的.语言显示会固定在代码块右上角

这个样式我不知道怎么调.

[jin-yufeng]

好的我明天试一下

[Y-A-K-E]

大佬,代码高亮的样式完美了.

不过预览图还是不行. H5可以预览,小程序开发工具或者小程序真机预览都不行.

经过验证,我好像发现问题所在了
https://r.photo.store.qq.com/psc?/V13iVwZo2obvUj/l8V*4kN5EKtnl2fKnrChMJ7iLsTXumkVF79pWC*hwJWUc6sTQw8nYohkg2pDPzOHNBkjBSwRTChqtZ3O62GyYQ!!/mnull&bo=HAHhARwB4QERCT4!&rf=photolist&t=5/r/_yake_qzoneimgout.png

这个可以,或者http协议也行.

//r.photo.store.qq.com/psc?/V13iVwZo2obvUj/l8V*4kN5EKtnl2fKnrChMJ7iLsTXumkVF79pWC*hwJWUc6sTQw8nYohkg2pDPzOHNBkjBSwRTChqtZ3O62GyYQ!!/mnull&bo=HAHhARwB4QERCT4!&rf=photolist&t=5/r/_yake_qzoneimgout.png

这种自适应的不行.无法预览.复现概率100%.

不知道是不是我IDE版本问题...

[jin-yufeng]

是的！没有协议名好像预览不了，我加个默认的 http:// 好了

[jin-yufeng]

预览那个按照 这里 修改一下就可以了

[Y-A-K-E]

预览那个按照 这里 修改一下就可以了

可以了,完美解决.谢谢大佬/