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

jin-yufeng / mp-html

小程序富文本组件，支持渲染和编辑 html，支持在微信、QQ、百度、支付宝、头条和 uni-app 平台使用

https://jin-yufeng.gitee.io/mp-html

MIT License

3.28k stars 480 forks source link

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

Closed Y-A-K-E closed 3 years ago

Y-A-K-E commented 3 years ago

使用平台
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 commented 3 years ago

不知道我哪里不对,去掉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 commented 3 years ago

好像还是不行的样子..

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

预览图

Screenshot 2020-12-14 164924

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

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

jin-yufeng commented 3 years ago

用我发的这个 zip 不行吗？我这里是可以的微信截图_20201214174208

Y-A-K-E commented 3 years ago

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

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

Y-A-K-E commented 3 years ago

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

jin-yufeng commented 3 years ago

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

获取完整组件包
```
npm install mp-html
```
编辑 tools/config.js 中的 plugins 项，选中 highlight
编辑 plugins/highlight/config.js 选择需要的功能（可选）
如果需要使用默认语言外的语言，前往 prismjs 下载需要的 prism.min.js 替换 plugins/highlight/prism.min.js（可选）
生成新的组件包
```
npm install
npm run build:uni-app
```
拷贝 dist/uni-app 中的内容到项目根目录

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

Y-A-K-E commented 3 years ago

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

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

问题点1 QQ截图20210110213508

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

另外一个问题就是样式的问题,问题不大. QQ截图20210110213550

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

jin-yufeng commented 3 years ago

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

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

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

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

Y-A-K-E commented 3 years ago

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

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

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

Y-A-K-E commented 3 years ago

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

Y-A-K-E commented 3 years ago

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

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

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

Screenshot 2021-01-10 224148

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

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

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

jin-yufeng commented 3 years ago

好的我明天试一下

Y-A-K-E commented 3 years ago

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

不过预览图还是不行. 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 commented 3 years ago

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

jin-yufeng commented 3 years ago

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

Y-A-K-E commented 3 years ago

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

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