在VSCode中写博客

如何在VSCode中写博客

目录

• 如何在VSCode中写博客
  • 1、Markdown插件
  • 2、cnblogs 插件
  • 3、图片上传
  • 4、文章上传

---

VSCode 提供了很多Markdown插件，可以方便撰写MarkDown文件。同时cnbolgs也提供了官方的插件，可以通过VSCode同步在cnbolgs中文章，随时新增、修改和删除。这样就可以卸载本地的其他Markdown工具，同时也能讲自己的随笔或文章实时分享到cnblogs，真正做到All_In_One。

1、Markdown插件

VSCode 本身支持 MarkDown，如果只是文本写作，没有特殊要求，没有必要安装其他的插件,因为不同的插件或软件对Markdown的渲染都有所不同，兼容性不是很好，所以最好不要选择比较特殊或某些软件专用的语法。

VSCode本身对MarkDown的渲染并不是很好，如果遇到表格，一般都达不到想要的效果，并且VSCode对Markdown预览时的主题颜色不能固定，会随着VSCode本身的设置而变化，并不能单独设置为白色。这时就需要一个预览功能较为完善的插件，通过对几个插件的使用，觉得Markdown Preview Github Styling 比较小也比较稳定，只是不支持mermaid图形。

提示：使用 Ctrl+Shift+V 快捷键可以在新标签页显示预览而不是分栏预览。

四则运算符	表达式	效果
加法符号	$x + y = z$	$x + y = z$
减法	$x - y = z$	$x - y = z$
加减	$x \pm y = z$	$x \pm y = z$
减加	$x \mp y = z$	$x \mp y = z$
叉乘	$x \times y = z$	$x \times y = z$
点乘	$x \cdot y = z$	$x \cdot y = z$
星乘	$x \ast y = z$	$x \ast y = z$
除法	$x \div y = z$	$x \div y = z$
斜除	$x / y = z$	$x / y = z$
分式1	$ \frac{ x + y } { y + z }$	$\frac{ x + y } { y + z }$
分式2	${ x + y } \over { y + z }$	${ x + y } \over { y + z }$

sequenceDiagram participant 客户端 participant 服务端 participant 观察者 Title: 简单的时序图示例(插件不支持但cnblogs支持) 客户端->服务端: 我想找你拿下数据 SYN 服务端-->客户端: 我收到你的请求啦 ACK+SYN 客户端->>服务端: 我收到你的确认啦，我们开始通信吧 ACK Note right of 服务端: 我是一个服务端 Note left of 客户端: 我是一个客户端 Note over 服务端,客户端: TCP 三次握手

2、cnblogs 插件

官方插件叫做“博客园cnblogs客户端”，搜索cnblogs第一个就是。

安装后需要进行登录认证，才可以与VSCode关联，关联后可以看到cnblogs上的随笔列表以及分类。

3、图片上传

Markdown编辑器窗口的上面提供了博客上传和图片上传的功能，图片上传支持本地图片和剪切板图片，经过实际测试，上传剪切板图片无效，可以先将图片粘贴到文章中，这时在本地目录就有了临时图片，然后选择传支持本地图片，则会在书写区显示已经上传的图片链接，非常方便。

cnblogs插件提供了一些与图片和本地文件同步的方面的配置，利用这些配置，可以将本地文件自动上传的服务器，或者自动将服务器上的文件同步到本地。

4、文章上传

Markdown编辑器窗口的上面提供了文章上传到博客园的功能，写完的文章可以先通过列表中文件名后面的设置按钮，设置文章的相关信息。

设置完毕后需要点击确定按钮保存。然后在文章列表后面，或者编辑窗口上面点击上传到博客按钮，即可完成文章的发布。