开源软件名称：

开源软件地址：

开源软件介绍：

pyhtmlPreviewer

介绍

pyhtmlPreviewer 是针对 Vim 写的 html 实时预览插件。

要求

1. python3
2. PySide2 >= 5.14（因为 5.14 里的 QWebEnginePage 里新加入了一个 NavigationTypeRedirect 选项，用于控制页面自动跳转）
3. gvim（vim 会因为 pyside2 不是主线程运行而报错）

编写原因

最近在翻译一个 html 文档，尝试了各种 Vim 插件，大部分都要安装 nodejs 才能与浏览器实时预览，但是感觉没一个成功的（最近脸黑），而我只会 python，所以只好用 PySide2 的 QtWebEngineWidgets 模块弄了个浏览器的界面来实时预览。

原理

启动

在 VIM 的插件脚本里，采用多线程启动 app.exec_，由于 PySide2 本身速度不快，所以启动会比较慢。

网页与 python 的通讯

通过 PySide2 中的 qwebchannel.js 来实现网页与 VIM 之间的通讯。

同步定位

通过 python 的 HTMLParser 库解析 html 信息，给相关的 tag 添加了自定义属性：pyhtmlpos，值 "x,y"（x，y是源码中的位置，可以通过 HTMLParser 的 getpos 函数来获取），最后每次点击时，通过 qwebchanne.js 传递给 python，实现 VIM 的光标跳转。只能针对静态网页，动态无法实现。其中 HTMLParser 解析过程不快，所以将刷新由原先的实时改成保存时刷新。

安装教程

1. 安装 python3.x(去官网下)
2. 安装 PySide2.(pip install PySide2)
3. vim-plug 插件安装：Plug 'https://gitee.com/mightyang/pyhtmlPreviewer.git'

使用说明

1. 默认 html 文件打开会自动打开浏览器；
2. 在上面的工具栏里加入编辑功能，开启后，网页跳转关闭，同步点击的 tag 位置与 VIM 中光标的位置，目前问题比如动态网页无法定位。

可控参数与命令：

参数

自动打开开关，默认开启

let g:pyhtmlPreviewerAutoOpen=1

文件格式绑定，如 '*.html,*.py,*.js'， 默认'*.html'

let g:pyhtmlPreviewerFileType='*.html'

同步定位是否定位到 text 上，默认开启，否则定位到 tag 上，目前部分标签无法确定，比如。

let g:pyHtmlPreviewerPosAtText=1

命令

窗口开光命令

PyHtmlPreviewToggle()

可以通过如下命令绑定快捷键：

map <F10> :call PyHtmlPreviewerToggle()<CR>