这个插件是源于为了分享一些前端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
可以选择你喜欢的其他主题或者想要的其他插件,语言的话,你要是勾选其他的,也想要对应的高亮,得自己改代码做专门的识别。
插件截图: