Hexo使用vscode优雅地向markdown插入html标签的图片

本文介绍如何在vscode中优雅地向markdown插入html的img标签格式的图片, 实现如下的功能

使用快捷键快速粘贴本地图片, 并且存到文件同名子目录
实现图片的本地markdown预览/ 本地server预览/ 远程部署
使用img标签来特定样式

使用vscode写markdown

代码人对vscode有莫名的执着😍，能用vscode解决的绝不使用其他编辑器…

搭建markdown环境

首先我们需要搭建vscode的markdown环境，以兼顾博客和代码实验报告

后续我会补充一期搭建教程，暂时先默认大家都有vscode-markdown环境. 没搭建的可以先参考我之前在CSDN写的博客

优雅地插入图片- pasteimg

pasteimg是用来方便在vscode插入markdown图片的插件

1. 介绍

如果直接写markdown，还得自己手动写图片路径，不够优雅

为了像typora一样可以复制粘贴图片，可以安装pasteimg插件，可以实现一键复制图片为![]()这样的markdown图片格式，或者是<img>这样的html格式

这样，只需要按快捷键，就可以实现自动在本目录创建子文件夹来存放图片，并且自动填写你需要的图片路径和标签。

最关键的是，这个标签格式可以自定义

如下，我自定义的是居中的、宽度400的、html通用的img标签

这种方式非常的快捷，不过只能预览本地的markdown，经过hexo处理之后路径就不对了

如果你早已配置好，可以直接跳转到本文asset-img插件的配置这里, 查看如何兼容hexo

2. 安装和配置

pasteimg的安装方式很简单,直接在vscode插件市场搜索即可

安装好之后, 在扩展上右键, 点击扩展设置, 如下

Insert Pattern代表了插入markdown的时候的图片格式, 如图我设置实现了

img标签图片
居中的格式, 自定义大小

此时的插入效果就像这样

参考配置代码如下

1	<center><img alt="img" width="400" src="${imageFilePath} "></center>

为什么我选择img标签而不是markdown自带的标签呢, 因为html的img标签可以很方便地自定义css样式

设置先别关, 往下翻一翻, 还要配置路径

如图的配置, 写入${currentFileNameWithoutExt}, 就可以实现插入图片到和md同目录的同名子目录下, 这是为了方便于后面的和hexo交互

这样, 本地的markdown环境就配置好了

hexo原有的插入图片的弊端

天下苦插入图片久矣

hexo内置的插入图片方式, 是让你将所有图片都放在source/images/目录下, 这非常麻烦/拥挤/混乱/不优雅

而且无法实现本地markdown预览, 必须要执行hexo s之后才能看到图片, 不能实时更新, 很烦😟

hexo-asset-img插件

于是乎, 就有大神开发了hexo-asset-img插件, 实现了

在markdown中使用![]()这样的markdown语法
把图片放到同名子目录, 配合 hexo的asset 功能进行图片转化
可以在本地markdown预览/hexo server预览/远程部署

教程参考

缺点是, 无法像html的img标签一样更改大小和样式,

如果你"不在乎样式" || “喜欢markdown原生图片语法”
可以按上面的教程配置, 比较简单快捷, 就不用往下看折腾js了

但是, 如果爱折腾, 要使用img标签, 达到"既要, 也要, 还要"的效果, 请看下面

修改js, 使用html标签

找了一圈教程, 都没有找到, 于是只能自己动手改js

找到博客根目录的 node_modules/hexo-asset-img/index.js
在function action(data)函数里, 大概是 20 行的位置
因为hexo的asset功能, 会在渲染md时把图片移到index.html的同目录, 因此我们修改如下

// ![example](postname/example.jpg)  -->  {% asset_img example.jpg example %}
// var regExp = RegExp("!\\[(.*?)\\]\\(" + fileName + '/(.+?)\\)', "g");

// 上面是原来的，下面是我的。把src="test/1.png"替换为src="1.png"
var regExp = RegExp("src=\"" + fileName + '/', "g");//匹配“当前文件名/”

// hexo g
// data.content = data.content.replace(regExp, "{% asset_img $2 $1 %}","g");

data.content = data.content.replace(regExp, "src=\"","g");