Chrome插件开发(微信公众号图文编辑器):设置代码高亮

Posted on by dsx2016
NO.1
PrismJs

官网地址

​https://prismjs.com/

img

目前了解到的代码高亮有两个

一个是PrismJs,一个是Highlight.js

但是我更喜欢PrismJs的代码样式和风格

还有一个是Carbon,代码生成图片

但是有一个问题,这个图片只能通过对方的网站或者提供的编辑器插件生成,目前没有找到自部署和API,所以无法引入插件

img

NO.2
使用代码高亮

在公众号编辑器的工具栏下面新增了自定义工具栏

img

点击左侧第一个代码icon的按钮

会弹出一个弹框

  1. 输入代码在左侧

  2. 选择对应的编程语言

  3. 右侧显示当前代码高亮效果

  4. 点击右下角全选按钮

  5. 鼠标右键复制

img

然后粘贴在公众号编辑器中

let a=1

目前尝试过

navigator.clipboard操作剪切板,写入和读取html

navigator.clipboard.write()

尝试过document.execCommand

document.execCommand('copy')
document.execCommand('paste')

以及公众号编辑器Ueditor的execCommand的inserthtml

execCommand('inserthtml', htmlContent);

除了浏览器自带的ctrl c和ctrl v能够正确复制代码高亮样式

其他的复制和插入代码高亮的形式或多或少都会有点问题,暂时没有好的自动化插入方案,后期再优化

NO.3
Tips

以下是公众号编辑器代码块原效果

let a=1

目前代码高亮复制的样式也同时支持wordpress博客

END.