最近打开 typora 时发现弹窗强更,不让用 beta 版了

想到自己并不是非常需要 WYSIWYG,而且也不是经常使用 typora,于是直接退回到 VSCode 了,而且在 VSCode 里可以直接打开终端操作,写完了推送到 GitHub 都很方便。

然后就是老生常谈的图片问题,之前记录过 typora 上的 解决办法 ,VSCode 上利用扩展也可以解决,下面简单记录下。

推荐插件

Markdown All in One : 快捷键、生成目录、自动预览等等

Markdown Image : 方便地在 Markdown 中插入图片,支持本地、图床或对象存储

Pangu-Markdown : 在中英文之间加空格

Office Viewer(Markdown Editor) : 如果有 WYSIWYG 需求的话推荐

图片插件使用方式

首先安装 Markdown Image 插件

可复制图片文件或截图粘贴,快捷键 Shift + Alt + V,或右键菜单粘贴图片

插件基本配置

  • markdown-image.base.uploadMethod: 上传图片的方式,根据不同的方式,须设置不同的项目
  • markdown-image.base.fileNameFormat: 图片文件命名格式化字符串。支持多种变量做格式化,可同时配置文件夹格式,具体见设置

uploadMethod 可选值为:

复制到本地

uploadMethod 设置为 Local

markdown-image.local.path: 图片本地存放路径,支持相对路径,相对于所粘贴 Markdown 文件,/ 表示打开的文件夹根目录。若路径不存在,将会自动创建

上传到图床或 OSS

按需选择,具体见 文档

自定义上传

当你用的图床不在默认支持列表时可以编写自定义代码来上传图片,配置 markdown-image.DIY.path 为你写的代码的路径

你的代码必须 exports 一个像 async function (filePath:string, savePath:string, markdownPath:string):string 的函数

如:

const path = require('path');
module.exports = async function(filePath, savePath, markdownPath) {
// Return a picture access link
return path.relative(path.dirname(markdownPath), filePath);
}
我的自定义代码:
const { createReadStream } = require('fs')
const fetch = require('node-fetch') // ^2.6.7
const FormData = require('form-data') async function upload({ filePath, preUpload, ...options }) {
const form = new FormData()
if (preUpload) await preUpload?.(filePath, form, options)
const { api, fileField = 'file', formData = {}, headers = {}, isSuccess, returnUrl } = options
form.append(fileField, createReadStream(filePath))
for (const [formKey, formValue] of Object.entries(formData)) {
form.append(formKey, formValue)
}
const response = await fetch(api, {
body: form,
method: 'POST',
headers: {
...headers,
...form.getHeaders()
}
})
if (!response.ok) throw new Error(response.statusText)
const json = await response.json()
if (isSuccess?.(json)) {
return returnUrl(json)
} else {
throw new Error(JSON.stringify(json, null, 2))
}
} // 以 bilibili 为例
module.exports = async function (filePath) {
const result = await upload({
api: 'https://api.bilibili.com/动态页自行发现'
filePath,
fileField: 'file_up',
formData: {
biz: 'new_dyn',
category: 'daily',
csrf: '你的 CSRF Token'
},
headers: {
Cookie: '你的 Cookie',
Origin: 'https://t.bilibili.com',
Referer: 'https://t.bilibili.com/'
},
isSuccess: d => d.code == 0,
returnUrl: d => d.data.image_url.replace('http:', 'https:')
})
return result
}
使用 upimg 上传:
const upimg = require('upimg')
module.exports = async function (filePath) {
// 以 bilibili 为例,文档见 npm
const { url } = await upimg.bilibili.set('cookie', '你的 Cookie').upload(filePath)
return url
}

Reference

Markdown Image Readme


fin.

Hexo + VSCode 插入 Markdown 图片解决办法的更多相关文章

  1. 用微软官方的 HTML Help Workshop制作的CHM文件不显示图片解决办法

    制作CHM文档,方便小巧还易于查看,用处自不必多说了,最近想把这个季度所学习的内容全部制作成CHM格式文档,给自己后续用来温故而知新,同时也可以做为后起之秀避坑法宝.但是在生成CHM文档之后发现有些地 ...

  2. 使用log4net无法将日志记录插入mysql数据库解决办法

    写在前面 今天没事研究了下,将日志文件写入mysql数据库,因为新公司用的数据库也是mysql,项目中需要将日志信息写入数据库,没办法,就研究了下.在使用过程中遇到一个很蛋疼的问题.最后解决了,郁闷了 ...

  3. php enum 数字类型插入失败的解决办法

    今天遇到一个问题,我设置mysql字段 existence 为enum ,值为 ''0','1'. 当使用 php 进行查找 where existence = 1 的时候,并没有查询出什么数据. 后 ...

  4. CefBrowser 复制图片解决办法

    使用的是CefSharp控件,开放出的功能比较多,但是还是有一些封闭的.例如复制图片到Clipbord,库没有提供. VC虽然看得懂,但托管代码没搞过,看得很蛋痛,而且如果有CefSharp有新版本还 ...

  5. Wordpress 外网访问时不显示图片解决办法

    我的云服务器是 :windows2012R 打开命令行: 进入到mysql中 show databases; //查看你Wordpress使用的数据库是否存在 use blog; //例如你使用的数据 ...

  6. PLSQL往表中插入中文乱码解决办法

    1.查看服务器端编码:select userenv('language') from dual; 2.查看第一行中PARAMETER项中为NLS_LANGUAGE 对应的VALUE项中是否和第一步得到 ...

  7. Jpa中设置OneToMany插入报异常解决办法

    在Jpa中如果设置@OneToMany,但使用的时候,如果没有赋值,会报异常出现,这时只需要实例化一个空数组即可, 但类型一定要对应: 实例如下: newField.setxxxxxList(new ...

  8. thinkphp5 大量数据批量插入数据库的解决办法

    对于数据量很小,怎么玩都是可以的. but!!! 如果有几十万或者百万级别的数据,该怎么处理,请往下面看

  9. docx转doc时,防止公式被转成图片的解决办法

    编辑社回复需要doc(Word 97-2003)格式的文档,可是将docx(Word 2007+)另存为doc格式时,发现公式被转成了图片.其实,最简单的办法就是,打个电话过去给编辑社:“大爷,拜托您 ...

  10. WPF循环加载图片导致内存溢出的解决办法

    程序场景:一系列的图片,从第一张到最后一张依次加载图片,形成“动画”. 生成BitmapImage的方法有多种: 1. var source=new BitmapImage(new Uri(" ...

随机推荐

  1. html5 css3 loading 效果

    canvas  html5load1 主要思路update  实现12个点的绘制和旋转效果 var update = function() { ctx.save();// 把当前绘图状态保存起来 ct ...

  2. Node.js系列之ubuntu环境搭建

    ctrl+alt+t打开终端(命令行) 一.准备Node.js所依赖的包(g++,curl,python等) sudo apt-get install g++ curl libssl-dev apac ...

  3. 一个经典实用的iptables shell脚本

    PS:这个iptables脚本不错,很实用,根据实际应用改一下就可以自己用.分享出来,供大家来参考.原作者佚名.源代码如下: #!/bin/sh # modprobe ipt_MASQUERADE m ...

  4. (3)tomcat源代码分析环境的搭建

    他山之石,可以攻玉. 要想了解tomcat,咱必须先搭建tomcat的环境,下载tomcat的源码,学习其架构. 1.首先是SVM  Import 2.创建新的资源库位置:http://svn.apa ...

  5. TypeScript-封装

    class People { private _name: string; age: number; print() { return this._name + ":" + thi ...

  6. The Golden Age CodeForces - 813B (数学+枚举)

    Unlucky year in Berland is such a year that its number n can be represented as n = xa + yb, where a  ...

  7. python自动化运维之路~DAY7

    python自动化运维之路~DAY7 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.客户端/服务器架构 C/S 架构是一种典型的两层架构,其全称是Client/Server,即 ...

  8. Go语言专题

    基础语法 Go语言配置开发环境 Go语言语法基础 Go语言面向对象 Go语言并发编程 Go语言搭建开发环境 语言库 Go语言fmt包 Go语言字节处理 Go语言字符串处理 Go语言JSON处理 Go语 ...

  9. hiho一下 第145周

    题目1 : 智力竞赛 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi.小Ho还有被小Hi强拉来的小Z,准备组队参加一个智力竞赛.竞赛采用过关制,共计N个关卡.在第i ...

  10. maven使用阿里镜像配置文件

    方法一: apache-maven-3.5.2\confsetting.xml,添加如下镜像配置: <mirrors> <mirror> <id>alimaven& ...