Markdown工具Typora配置双击图片放大功能

1    973    3

👉 本文共约1282个字,系统预计阅读时间或需5分钟。

在Typora中,默认没有点击图片放大功能,本文就教大家如何配置该功能。

我的环境版本

  • Typora版本:0.11.8
  • LightBox版本:2.11.3

下载LightBox

可以从Github下载:https://github.com/lokesh/lightbox2

拷贝文件

将dist目录中的文件拷贝到Typora的安装目录的相应位置下。

Markdown工具Typora配置双击图片放大功能

在安装目录的D:\Program Files\Typora\resources\文件夹下,新建了extend文件夹,用来存放扩展插件的,dist目录下的文件也放到了这。

Markdown工具Typora配置双击图片放大功能

修改window.html文件

位置:D:\Program Files\Typora\resources\window.html(这个文件实际就是Typora的主界面)

引入 css 文件

可以搜索</head>,在它的前面添加:

Markdown工具Typora配置双击图片放大功能

引入 js 文件

可以搜索</script><script src="./appsrc/window/frame.js" defer="defer"></script>,然后在它的后面添加:

Markdown工具Typora配置双击图片放大功能

修改 lightbox.js 文件

因为lightbox需要有 a 标签包围着 img 标签,相应的点击事件是绑定在 a 标签上的,且需要 href 、 data-lightbox 、 data-alt 等属性,而Typora中的图片只有 img 标签,父级没有 a 标签,也没有相应要求的属性。因此需要改造一下 lightbox.js 文件。

为img标签绑定双击事件

修改enable函数,添加代码:

Markdown工具Typora配置双击图片放大功能

修改属性值获取

lightbox用到三个属性:althreftitle,这三个属性在img标签中均有对应的。

修改start函数,换成img对应属性:

本人提供Oracle、MySQL、PG等数据库的培训和考证业务,私聊QQ646634621或微信db_bao,谢谢!

Markdown工具Typora配置双击图片放大功能

注释data-lightbox

还有另外一个属性data-lightbox,img没有该属性,因此这里不使用,lightbox中有一段判断是否有该属性的代码,修改不存在该属性时的逻辑代码(注释掉原有的,添加addToAlbum($link);):

Markdown工具Typora配置双击图片放大功能

修改完成,保存即可。

启动Typora,验证

双击要放到查看的图片,即可。

参考

https://blog.csdn.net/wu_zeqin/article/details/113942617

标签:

头像

小麦苗

学习或考证,均可联系麦老师,请加微信db_bao或QQ646634621

您可能还喜欢...

1 条回复

  1. 头像 xsw说道:

    请问mac系统下怎么新增typora的图片缩放功能吖

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

12 − 4 =

 

嘿,我是小麦,需要帮助随时找我哦
  • 18509239930
  • 个人微信

  • 麦老师QQ聊天
  • 个人邮箱
  • 点击加入QQ群
  • 个人微店

  • 回到顶部
返回顶部