0

0

聊聊VSCode中怎么搭建MarkDown写作环境

青灯夜游

青灯夜游

发布时间:2022-07-06 20:29:12

|

3447人浏览过

|

来源于掘金社区

转载

typora收费了?下面本篇文章给大家介绍一下vscode中搭建markdown写作环境的方法, 开源软件,完全值得信赖!强烈推荐!

聊聊VSCode中怎么搭建MarkDown写作环境

我平时用的最习惯的MarkDown写作工作是Typora,所见即所得的用户体验,再加上丰富的主题,让人忍不住直呼“真香”。

但是大家都知道,Typora1.0之后,它就开始收费了,最近我的Mac电脑上装的Typora,已经开始提示我升级。而且,整理我的《面渣逆袭手册》的时候,因为文件太大,Typora非常卡顿,所以,思来想去,我决定用VS Code搭建一套MarkDwon写作环境。

一、VS Code安装

VS Code的安装就不用多说了,从官网下载对应版本的安装包,安装即可。【推荐学习:《vscode入门教程》】

官网下载地址:code.visualstudio.com/Download

1.png

这是我的Windows电脑上安装的VS Code,注意看,我的顶栏、侧边栏都是中文的,因为安装了中文的插件:

2.png

二、MarkDown插件增强

我们来看一下直接用VS Code打开MarkDown文件的效果:

3.png

右上角可以打开双栏预览:

4.png

看起来,还可以,但还有改进的空间,我们可以安装一些插件来让它变得更好。

1. Markdown All in One

Markdown All in One是一款多合一的MardDown增强插件:

5.png

它号称支持Markdown所需要的一切功能,包括键盘快捷键、目录、自动预览等等,可以看一下它的扩展页,或者仓库说明文档:

  • https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
  • https://github.com/yzhang-gh/vscode-markdown/blob/master/README.md

5-2.png

2.Markdown Image

Markdown Image主要是对MarkDown中插入图片的扩展,支持将图片放在本地或第三方的图床或对象存储。

使用这个插件,可以做到类似Typora的直接复制本地图片,然后粘贴进MarkDown,图片文件默认是放在本地,也可配置支持 Imgur七牛SM.MSCoding 等图床。

6.png

安装完这个插件之后,可以做一些配置,进配置页,搜索:markdown-image,可以配置一下相对路径,默认图片文件保存在/res路径下。

7.png

使用快捷键Shift+Alt+V就可以直接将剪贴板里面复制好的图片粘贴进文档里:

8.png

3.Markdown Preview Enhanced

Markdown Preview Enhanced是对VS Code预览功能的增强,可以改善VS Code的预览体验。

9.png

安装这个插件以后,点击预览按钮,就会使用增强的预览:

10.png

还可以在边栏显示目录,不过显示了目录,整个界面就显得有些逼仄。

11.png

它同样也提供多个预览主题:

12.png

4.Word Count CJK

Word Count CJK是一个用来统计中文字数的插件:

13.png

对于我这种爱肝长文的人来讲,看到文章的字数,也是满满的成就感了。

14.png

Med-PaLM
Med-PaLM

来自 Google Research 的大型语言模型,专为医学领域设计。

下载

5.MarkDown Editor

如果说我们就是要Typora所见即所得的体验呢?

我也找到了一款插件MarkDown Editor:

15.png

安装完成之后,对MD文件选择Open with MarkDown Editor就可以所见即所得地打开MD文件了。

MarkDown Editor使用

还有一些其它的插件:

  • markdownlint:markdow格式检查
  • Markdown Preview Github Styling:GitHub主题预览

大家也可以去体验一下。

三、图床搭建

使用MarkDown写作,还有一个重要的需求,就是图床,我们写的文章是要发布出去的,MD中的图片是以路径形式保存,本地的路径发布出去可没法访问,所以我们需要给MD编辑器接入图床的功能。

我之前用Typora+PicGo+Gitee搭建了一版图床,后来Gitee出了那档子事,又换成了Typora+PicGo+Github,我们也照这个思路,在VS Code上搭建一版图床。

1.GitHub仓库配置

2.1. 创建一个新的仓库

创建一个新的GitHub仓库:

  • 公开,必须的,防止访问不到
  • 添加一个READM文件,防止仓库没有主干分支

17.png

2.2. 生成token

  • 进入settings

18.png

  • 找到developer settings

19.png

  • 创建新的Personal access tokens,时间设置为永不过期,给repo权限就可以了

20.png

  • 生成的Token要记下来,只显示一次

21.png

2. 安装配置PicGo

2.1.安装PicGO插件

在VS Code里搜索PicGo,安装:

22.png

2.2.配置PicGO

  • 打开PicGo的扩展配置

23.png

  • 配置uploader,选择github

24.png

  • GitHub相关配置,以我的配置为例:

    • Branch:main,分支

    • Path:空,也可以配置一个相对路径

    • Custome Url:空,

      其实可以配置一个CDN加速的url,jsDeliver,它是一个免费的CDN,最近似乎不可用了,大家也可以试一下,它的使用方法:https://cdn.jsdelivr.net/gh/你的github用户名/你的仓库名@发布的版本号——cdn.jsdelivr.net/gh/fighter3…

    • Repo:fighter3/picgo-win,用户名/仓库格式

    • Token:填之前保存的就行了

25.png

3.图床使用

  • 打开MD文件,从别的地方粘贴一个图片,使用 Ctrl + Alt + U,可以看到文件成功上传,并且可以预览

26.png

图片上传相关的快捷键:

OS 从粘贴版上传图片 从浏览器上传图片 从输入框上传图片
Windows/Unix Ctrl + Alt + U Ctrl + Alt + E Ctrl + Alt + O
OsX Cmd + Opt + U Cmd + Opt + E Cmd + Opt + O

用GitHub当图床整体上还是不太理想,上传和访问都不太稳定,我们也可以在PicGo插件里把图床换成七牛、或者腾讯云、阿里云,大体上过程类似,也比较简单。

更多关于VSCode的相关知识,请访问:vscode教程

相关专题

更多
counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

191

2023.11.20

登录token无效
登录token无效

登录token无效解决方法:1、检查token的有效期限,如果token已经过期,需要重新获取一个新的token;2、检查token的签名,如果签名不正确,需要重新获取一个新的token;3、检查密钥的正确性,如果密钥不正确,需要重新获取一个新的token;4、使用HTTPS协议传输token,建议使用HTTPS协议进行传输 ;5、使用双因素认证,双因素认证可以提高账户的安全性。

6021

2023.09.14

登录token无效怎么办
登录token无效怎么办

登录token无效的解决办法有检查Token是否过期、检查Token是否正确、检查Token是否被篡改、检查Token是否与用户匹配、清除缓存或Cookie、检查网络连接和服务器状态、重新登录或请求新的Token、联系技术支持或开发人员等。本专题为大家提供token相关的文章、下载、课程内容,供大家免费下载体验。

777

2023.09.14

token怎么获取
token怎么获取

获取token值的方法:1、小程序调用“wx.login()”获取 临时登录凭证code,并回传到开发者服务器;2、开发者服务器以code换取,用户唯一标识openid和会话密钥“session_key”。想了解更详细的内容,可以阅读本专题下面的文章。

1041

2023.12.21

token什么意思
token什么意思

token是一种用于表示用户权限、记录交易信息、支付虚拟货币的数字货币。可以用来在特定的网络上进行交易,用来购买或出售特定的虚拟货币,也可以用来支付特定的服务费用。想了解更多token什么意思的相关内容可以访问本专题下面的文章。

1058

2024.03.01

windows查看端口占用情况
windows查看端口占用情况

Windows端口可以认为是计算机与外界通讯交流的出入口。逻辑意义上的端口一般是指TCP/IP协议中的端口,端口号的范围从0到65535,比如用于浏览网页服务的80端口,用于FTP服务的21端口等等。怎么查看windows端口占用情况呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

484

2023.07.26

查看端口占用情况windows
查看端口占用情况windows

端口占用是指与端口关联的软件占用端口而使得其他应用程序无法使用这些端口,端口占用问题是计算机系统编程领域的一个常见问题,端口占用的根本原因可能是操作系统的一些错误,服务器也可能会出现端口占用问题。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1021

2023.07.27

windows照片无法显示
windows照片无法显示

当我们尝试打开一张图片时,可能会出现一个错误提示,提示说"Windows照片查看器无法显示此图片,因为计算机上的可用内存不足",本专题为大家提供windows照片无法显示相关的文章,帮助大家解决该问题。

725

2023.08.01

苹果官网入口直接访问
苹果官网入口直接访问

苹果官网直接访问入口是https://www.apple.com/cn/,该页面具备0.8秒首屏渲染、HTTP/3与Brotli加速、WebP+AVIF双格式图片、免登录浏览全参数等特性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

10

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
go语言零基础开发内容管理系统
go语言零基础开发内容管理系统

共34课时 | 2.5万人学习

第二十三期_前端开发
第二十三期_前端开发

共98课时 | 7.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号