一次失败的尝试——VSCode中写Markdown文档

64 阅读3分钟

阅前须知

注意!

测试使用的方案最终是失败的,不想看过程就别点了

前言

这是遇到的一个实际问题,在 GitHub, 掘金社区,微信公众号都有账号,每次写文章时,都需要单独添加图片,图片路径,图片名称等等,非常麻烦,例如在掘金社区中写的文章,图片自动上传的掘金服务器,然后同样的文章复制在微信公众号中,只能复制文本等内容,图片就上传失败了,需要单独再把文章中失败的图片重新手动处理一下,因为日常编码用 VSCode 比较多,想到的一个方式是,在 VSCode 中,写 Markdown 文档,可以添加图片使用插件等方式自动转成网络图床路径图片,这样写好的文章不仅直接上传到 GitHub 中,还能把文档上传到掘金平台或者复制到微信公众号中,省得重复处理图片

VSCode默认添加图片方式

操作在 Windows11 系统中执行

VSCode 中,写 Markdown 文档,可以添加图片,添加截图等等,下面介绍几种添加图片的方法

添加本地图片

本地图片粘贴

Ctrl + C 复制图片,在编辑区,直接粘贴 Ctrl + V 即可,这时候的路径会自动转化,例如在 C盘中的图库中的图片,复制后,在编辑区粘贴,图片会自动生成到当前 md 文件所在的文件夹下,路径会自动转化成 ![alt text](xxx.jpg) 格式

![alt text](9905c258279b9740209ef8006947a245-3-1.jpg)

![alt text](下载.png)

本地图片拖拽

在编辑区,将图片拖拽到编辑区,图片会自动生成到当前 md 文件所在文件夹下,路径会自动转化成 ![alt text](xxx.jpg) ,操作方式为按住 Shift 键的同时将图片拖入编辑器

添加截图

例如微信快捷键截图 ,Alt + A 截图,截好图后,在编辑区,按 Ctrl + V 粘贴,就会生成对应的图片地址,接好的图会自动保存到当前 md 文件所在文件夹下,路径会自动转化成 ![alt text](image.png)

![alt text](image.png)

使用插件将图片添加图床服务

GitHub 图床

默认添加的图片,路径会自动转化成 ![alt text](xxx.jpg) 格式,但是图片会保存在当前 md 文件所在文件夹下,如果要上传到 GitHub,或者其他平台,图片路径会丢失,我这里使用 Markdown Image 插件

image-1.png

配置Github图床服务

  1. GitHub 中创建一个新的公开仓库,并添加一个 README.md 文件,保证 main 主分支存在

  2. 点击 GitHub 头像,进入 ​Settings​ > ​Developer settings​ > ​Personal access tokens​ > ​Tokens (classic)​

image-2.png

  1. 点击 ​Generate new token,选择 ​Classic token,添加 Note 描述,设置 ExpirationNo expiration

  2. 勾选 ​repo,点击 ​Generate token

莫名其妙这样了,刷新重试后,就看到 token

image-3.png

  1. 复制 ​token保存, 注意!!! ​token 只会显示一次

image-4.png

Markdown Image 插件配置

VSCode 中,进入设置。在搜索框中输入 markdown image

image-5.png

设置插件的 Upload MethodGitHub

image-7.png

GitHub设置 跳转到 GitHub 的设置页面

输入 GitHubpathtokenrepositorybranch 等参数

image-8.png

配置完成后,重启,按理来说应该就可以在 VSCode 中使用 Markdown Image 插件上传图片到图床了

然而,我本地做的测试并没有反应,我尝试截图,和说拽图片的方式,都是只保存到本地,没有上传到图床

image-10.png

image-11.png

再次检查 VSCode 中的 Markdown Image 插件设置和 GitHub 的仓库,以及 token 的设置,都正常,就是无法上传到仓库中

A5DB98962998F4F2A5AF3FC5FAB1DC05.jpg