suyc's blog

哎，什么时候才能把英语学好啊🙇‍~

Hexo with VSCode

Posted on Edited on In

介绍一下怎么在vscode中预览hexo的图片、label和note~

本文提到的方法有两个前提：
1.适用于把所有素材放到images下时；
2.适用于使用NexT主题时

开启了post_asset_folder功能的请参考reference的链接和本文修改，或者直接使用hexo-image-link这类插件。使用其他主题可以参考本文修改。

Paste Image

首先需要安装插件Paste Image，这个插件是用来粘贴图片的，直接把图片复制，然后在vscode中粘贴即可，十分方便。

需要注意的是，当粘贴的时候，只需要将文件名用鼠标圈住，然后再粘贴，就可以把圈住的文件名当作粘贴后的文件名，十分方便。具体操作可见插件说明页。

安装好后在当前项目的.vscode/setting.json中写上以下配置项，这些配置项只会影响当前项目，不推荐写入系统配置项。

1
2
3
4
5
6
7
8
{
    "pasteImage.namePrefix": "${currentFileNameWithoutExt}-",
    "pasteImage.path": "${projectRoot}/source/images",
    "pasteImage.basePath": "${projectRoot}/source",
    "pasteImage.forceUnixStyleSeparator": true,
    "pasteImage.prefix": "/",
    "pasteImage.insertPattern": "{% img ${imageFilePath} %}"
}

解释一下，意思是使用(当前文件名-圈住的名字)当前缀，然后粘贴到/images/XXX下。上个图一看(图是之前的，fi已经替换成了img语法，道理不变)：

Markdown Preview Enhanced

这个插件是用来预览的，支持自定义扩展，安装好后ctrl+shift+P输入Markdown Preview Enhanced: Extend Parser，修改对应部分：

文件名支持.，-，数字，英文字符。

闲暇的时候现学了俩小时js，然后改了改。为什么只做了下边这几个，因为这几个参数容易控制且在一行之内…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
onWillParseMarkdown: function(markdown) {
  return new Promise((resolve, reject)=> {
    markdown = markdown.replace(
      /\{%\s*img\s*([\w/\.-]*)\s*(\d*)\s*(\d*).*%\}/g,
      `<center><img src="../$1" width="$2" /></center>`
    ).replace(
      /\{%\s*label\s*(|default|primary|success|info|warning|danger)\s*\@\s*([\u4e00-\u9fa5]+)\s*%\}/g,
      `==$2==`
    ).replace(
      /\{%\s*note.*%\}\s*\n*(.*)\n*\{%\s*endnote\s*%}/g,
      `> $1`
    )
    return resolve(markdown)
  })
},

上边使用了一个链式得替换，逐步把markdown文件中的所需部分进行替换。一共替换了3次，则实现了3个功能：

  • img的解析，同时也把写好的宽度解析出来了
  • label的解析，使用这个插件进行预览的时候可以进行高亮设置，于是无论用的那个参数都进行了高亮
  • note缺点是note只支持一行note的解析，匹配多行调不好，但是平常用是没问题了
    其他的问题就诸如{\% \%}必须要连在一起写啊这都是习惯问题了，我平常习惯这么写了，这个就没改。

在这里再推荐一个Markdown All in One，功能也很强大，比如直接插入链接等，很实用。

旧版，适合7.4.0之前含有fi标签的图片

 
1
2
3
4
5
6
7
8
{
    "pasteImage.namePrefix": "${currentFileNameWithoutExt}-",
    "pasteImage.path": "${projectRoot}/source/images",
    "pasteImage.basePath": "${projectRoot}/source",
    "pasteImage.forceUnixStyleSeparator": true,
    "pasteImage.prefix": "/",
    "pasteImage.insertPattern": "{% fi ${imageFilePath},,, %}"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
onWillParseMarkdown: function(markdown) {
    onWillParseMarkdown: function(markdown) {
    return new Promise((resolve, reject)=> {
      markdown = markdown.replace(
        /\{%\s*fi\s*([\w/\.-]*)\s*,.*,.*,\s*(\d*)\w*\s*%\}/g,
        `<center><img src="../$1" width="$2" /></center>`
      ).replace(
        /\{%\s*label\s*(|default|primary|success|info|warning|danger)\s*\@\s*([\u4e00-\u9fa5]+)\s*%\}/g,
        `==$2==`
      ).replace(
        /\{%\s*note.*%\}\s*\n*(.*)\n*\{%\s*endnote\s*%}/g,
        `> $1`
      )
      return resolve(markdown)
    })
  },

reference

《利用vscode插件与git hook提升hexo编写部署体验》link
菜鸟工具，在线匹配正则，如果要修改正则的话可以用这个看看 link
w3school JavaScript replace() 方法 link $n的写法就是从这里学来的
官方文档

Related Posts