热门标签 | HotTags
当前位置:  开发笔记 > 开发工具 > 正文

Hexo+VSCode插入Markdown图片解决办法

最近打开typora时发现弹窗强更,不让用beta版了想到自己并不是非常需要WYSIWYG,而且也不是经常使用typora,于是直接退回到VSCode了,而且在VSCode里可以直

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

图 1

想到自己并不是非常需要 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,或右键菜单粘贴图片

图 2


插件基本配置



  • markdown-image.base.uploadMethod: 上传图片的方式,根据不同的方式,须设置不同的项目

  • markdown-image.base.fileNameFormat: 图片文件命名格式化字符串。支持多种变量做格式化,可同时配置文件夹格式,具体见设置

uploadMethod 可选值为:

图 1


复制到本地

uploadMethod 设置为 Local

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


上传到图床或 OSS

按需选择,具体见 文档

图 3


自定义上传

当你用的图床不在默认支持列表时可以编写自定义代码来上传图片,配置 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.



推荐阅读
  • CSS技巧:创建带有背景图的按钮
    本文详细探讨了使用CSS创建带有背景图片的按钮的方法,并提供了具体的实例代码,帮助开发者解决实际开发中的相关问题。 ... [详细]
  • jquery java 文件上传_jQuery文件上传
    插件描述:这是一个文件上传的展示,看很多插件,并不满意就自己写了一个,可能兼容性不是很好,没有准确进行测试过& ... [详细]
  • 本文介绍了多种Eclipse插件,包括XML Schema Infoset Model (XSD)、Graphical Editing Framework (GEF)、Eclipse Modeling Framework (EMF)等,涵盖了从Web开发到图形界面编辑的多个方面。 ... [详细]
  • 本教程旨在指导开发者如何在Android应用中通过ViewPager组件实现图片轮播功能,适用于初学者和有一定经验的开发者,帮助提升应用的视觉吸引力。 ... [详细]
  • Backup Exec 11d 初学者使用心得与技巧
    随着企业应用程序的不断扩展,数据备份的需求日益增加。本文通过介绍Symantec Backup Exec 11d的实际应用体验,旨在为初学者提供一些实用的操作指南和建议。 ... [详细]
  • 在开发H5页面时,为了减少资源请求和简化工作流程,直接使用SVG和CSS3来创建简单的图形元素是一个高效的选择。本文将探讨如何不依赖于第三方图标库,仅通过HTML和CSS技术实现一个‘返回顶部’的图标。 ... [详细]
  • 深入探讨LeetCode上的一道经典算法题——判断一个整数是否为4的幂,提供高效解决方案。 ... [详细]
  • 在创建带有左侧图标的按钮时,遇到了文本与图标对齐的问题。本文提供了几种使用Bootstrap 4解决此问题的方法。 ... [详细]
  • 通过几个简单的设置调整,可以显著提高手机的运行速度,让您的设备像刚买时一样流畅。 ... [详细]
  • 解决MATLAB中文件 'mischouse.tiff' 不存在的问题
    探讨如何解决在MATLAB中尝试访问文件 'mischouse.tiff' 时出现的文件不存在错误。 ... [详细]
  • 本文介绍了如何通过编辑特定配置文件来自定义Linux系统中Bash的登录界面以及登录成功后的显示信息,包括本地和远程连接时的提示。 ... [详细]
  • 本文介绍了在Word文档中添加背景的方法,旨在通过合理的背景设置提升文档的整体视觉效果。 ... [详细]
  • 高效产品原型设计:技巧、经验和注意事项
    本文由PMTalk社区资深作者AllenDan撰写,分享了如何在日常产品工作中快速有效地设计产品原型,并确保设计易于理解,减少评审时的质疑。文章不仅提供了实用的技巧和经验,还强调了设计过程中的注意事项。 ... [详细]
  • 探索国内最美秋日枫景地
    随着秋风渐起,国内多个地区迎来了观赏枫叶的最佳时期。本文精选了几处国内知名的枫叶观赏地,不仅景色迷人,而且各有特色,适合秋天出游。跟随我们的指南,一起走进这些被枫叶装点的美丽角落。 ... [详细]
  • 深入解析Java并发之ArrayBlockingQueue
    本文详细探讨了ArrayBlockingQueue,这是一种基于数组实现的阻塞队列。ArrayBlockingQueue在初始化时需要指定容量,因此它是一个有界的阻塞队列。文章不仅介绍了其基本概念和数据结构,还深入分析了其源码实现,包括各种入队、出队、获取元素和删除元素的方法。 ... [详细]
author-avatar
yangaien
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有