Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

如何为 Typora 添加图床? #117

Open
bosens-China opened this issue Nov 19, 2024 · 0 comments
Open

如何为 Typora 添加图床? #117

bosens-China opened this issue Nov 19, 2024 · 0 comments
Labels
工具相关 工程化相关的东西

Comments

@bosens-China
Copy link
Owner

bosens-China commented Nov 19, 2024

其实自己一直不是 Typora 的重度用户,虽然可以实时预览编辑,但是我期待的格式化功能目前还是缺失。

但是得益于颜值自己还是会偶尔使用它,但是本地的 md 文件和发布到掘金和 Github 等平台还需要对本地链接一个个转换,实在是非常不友好。所以就有了这篇文章,介绍一下在 Typora 中如何自定义上传的逻辑。

这里不使用默认自带的一些上传服务原因是因为有一些图床的服务和返回格式需要用到代码层面才能实现。image-20241119133339163

自定义命令

因为自己是一个 jser,所以思路就是编写一个命令行的脚本,通过调用 xxx 的形式来调用,命令后的基础可以参考这个文章。

Node.js 命令行程序开发教程

看一个 Typora 的调用示例

<command> "/Applications/Typora.app/Contents/Resources/TypeMark/assets/icon/icon_512x512.png" "/Applications/Typora.app/Contents/Resources/TypeMark/assets/icon/icon_256x256.png"

也就是命令后面会携带图片的信息,那根据这个我们可以很简单的实现获取图片的数量

const imgList = process.argv.slice(2);

而处理之后只需要调用 process.stdout.write 将图层的图片地址写入即可

process.stdout.write(`Upload Success:\n${result.join('\n')}`);

调试可以运行

image-20241119134224292

然后不出所料的话,应该可以看到一个这样的效果。

image-20241119133752427

导出格式化

最初其实有提到 Typora 格式化其实是有缺失的,而在官方博客给的格式化方式是通过导出来执行一次全局的。

不过我个人感觉还是很鸡肋,但是还是决定介绍下如何与 prettier 相结合使用。

在设置页面找到导出,然后添加一个新的导出命令,最后运行即可。

image-20241119135822337

npx [email protected] --write "${currentPath}"

注意 npx 初次运行可能会提示是否安装,但是在非交互的终端其实是没办法执行的。再次运行就不会出现了。

最后

上面省略了代码的实现逻辑,如果想参考完整的代码可以点击查看

最后如果有什么错误 🙅,欢迎指出。

@bosens-China bosens-China added the 工具相关 工程化相关的东西 label Nov 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
工具相关 工程化相关的东西
Projects
None yet
Development

No branches or pull requests

1 participant