这个插件是源于为了分享一些前端HTML代码,加一个预览方便用户实时查看。当然如果遇到一些文件比较多的HTML代码,我还是单独走服务器或者对象存储。不过对于一些没什么文件要加载的,就不想再去上传了,所以这个插件就出来了,代码高亮是基于prismjs库,代码高亮也只支持HTML,是不支持其他代码的,其他代码以markup的方式显示。

html代码要实现预览,第一行代码必须包含html的标准:<!DOCTYPE html>

如果第一行代码没有这个,就不以html的方式显示,也就不显示预览按钮了。

插件名称:小半HTML代码预览

插件下载:WordPress HTML代码高亮预览开源免费插件下载

插件功能:

  • 通过短代码插入HTML代码,前台高亮代码以及预览代码效果。
  • 经典编辑器快捷键入口
  • 其他代码以markup的方式显示

prismjs库我用的本地,内置插件:

  • Line Highlight (高亮)
  • Line Numbers(行号)
  • Toolbar(工具栏)
  • Copy to Clipboard Button(复制代码按钮)
  • Match braces(匹配括号)

内置支持的代码格式:

  • php
  • sql
  • nginx

其实默认就行了,我只是想测试下,就又勾选了php、sql、nginx,因为我反正我没有做专门的适配,只要不是html就默认走

内置主题:

  • Tomorrow Night

prismjs库可以自己到官方按需勾选:

  • https://prismjs.com/download.html

可以选择你喜欢的其他主题或者想要的其他插件,语言的话,你要是勾选其他的,也想要对应的高亮,得自己改代码做专门的识别。

插件截图: