在vscode上编写jsp_使用vscode高效编写博客园博客
图片上传可真麻烦!
之前写博客的时候，我一般是使用马克飞象先编辑好然后直接复制粘贴到博客园中，这样做一方面可以一边写一遍预览改，另一方面可以保存到印象笔记中，这样一举两得，比较方便。可唯一的问题就在于，图片插入的问题，如下图
如图可以看到，本地编辑预览的时候图片引用的是本地路径的图片(这当然也是理所应当的事，因为文档就是本地的)，于是在写完之后，将文章放到博客园的编辑器里的时候，就要重新的去拖拽上传图片或者gif,当图片数量多了起来之后，就显得很麻烦了。明明我都写完了，怎么还要折腾呢？
使用园友的插件
昨天在搜索vscode中关于racket的配置的问题时候，无意间看到了一篇博客园的用vscode写博客和发布，发现这位博主根据xmlrpc编写了一个cnblog的插件，其中就包括了很方便的图片上传，我如获至宝，立刻进行了实践，发现效果还不错(这篇文章就是用vscode编写发布的啦~)。
安装与使用
安装vscode与cnblog插件
这里还是给出原作者的文章，里面写的已经十分清楚用vscode写博客和发布。
插件的功能虽然不多，但都十分实用，已经完全可以满足日常需求啦。
高效截取图片并上传
看完上面插件作者的文章我觉得应该都明白功能的使用了，这里我讲一下我截图并且上传的一些小技巧。
截图我使用的是QQ截图，默认的快捷键(ctrl+alt+a)，可以自定义编辑一些文字，很方便。在编辑完截图之后使用ctrl + s可以保存到本地的文件夹，如图
之后可以将保存到本地的文件夹，这里我们可以将用于存储博客图片的文件夹添加至windows快速访问区(写博客的电脑系统为win10)，如图。
在将文件夹设置到快速访问区之后，每次截图编辑完保存的时候就可以直接选择快速访问区的文件夹了,如图。
接着可以为图片文件设置一个容易分辨的名字，例如图中我设置的是vscode-blog-1这样的文件名，这样比较容易区分。并且从第二张图片开始你就可以直接在第一章图片上使用f2 + ctrl c快速的复制到文件名，剩下的文件名你只需要输入类似2 3 4 5的序号即可。
最后使用cnblog插件的图片上传功能将图片上传到博客园里即可，下面是完整的操作图。
整个操作步骤其实一共只有三步 截图-保存-上传 ，操作完毕之后图片与博文一步到位。
安装markdown的辅助插件
换成了vscode编写博客，我发现链接，表格与目录的快捷插入方式都没有了(这几点马克飞象里都是有的)，该怎么办呢？这里我自己使用的是两款markdown插件，只用到了里面的一些功能，不过对我来说已经足够了。
Markdown Shortcuts插件，该插件可以提供链接与表格的快速插入(我只用到了这里面这两项功能),下载完插件后，在编辑页面点击右键即可看到关于链接(默认ctrl + l)的快捷键，以及表格(add table)的插入,插入表格可以自行设置快捷键,这里我设置的是ctrl+t。如图
Markdown All in One插件，名字很霸气的插件。我使用到了里面的数学公式插入,css预览美化与目录生成插件(当然博客园的是用Js函数生成的)。
数学公式的默认快捷键是alt + m(math)，例如\(f_(x) = x^2\)
生成目录可以通过命令查找来完成markdown create table of conents,如图
css的样式可以在用户目录添加这样的一段Json字符串设置(这里的地址可以填写你本地或者网络的css文件地址){
"markdown.styles": [
"https://files.cnblogs.com/files/invoker-/dark.css"
]
}
在vscode左侧插件还提供了Markdown的提纲进行查看，方便这里思绪整理，如图。
使用github进行同步管理
使用上图的设置之后，我感觉比起之前用马克飞象写，舒服了很多，但马克飞象是和印象笔记关联的，这里我觉得不如直接把博客和github进行关联，这样方便保存和管理。
如何安装与使用git这里我就不再赘述了，相关的教程十分的多。简单来说就是将本地的博客文件夹和github远程仓库进行关联。vsCode内置了git插件，git的提交和推送通过命令搜索都十分的方便，如图。
同样的，你也可以自行设置git常用操作的快捷键。这样，你只需要按几个键，文章就推送到github上了，非常简单。如下图。
总结
在一翻设置之后，之前写博客觉得最麻烦图片问题总算解决了，现在我只需要在vscode编写预览完博客，连浏览器都不用打开，按几个键，就可以把博客推送到cnblog与github上了
在vscode上编写jsp_使用vscode高效编写博客园博客相关推荐
- 怎么在vs code上编写C语言,VScode上配置 c语言环境的图文教程
成成最近用到C语言了,之前比较喜欢用在vscode上面用python调试,今天我参考了一些文章,也尝试了下在vscode上配置c语言的调试,其中包含一些相关的基础知识. 1.在vscode里面下载c/ ...
- 在 vscode 上刷力扣 Leetcode 可以这样来
背景 神奇的算法网站 LeetCode 值得驻留,网页版似乎不太方便,作为习惯于在编译器上敲代码的你,如何 vscode 上优雅的刷力扣 Leetcode,在本地配置,记录下来方便备查. 环境前置:电 ...
- Vscode上使用opencv（C++接口，Windows篇）
Vscode上使用opencv(C++接口,Windows篇) opencv是任何一个学习或者对视觉算法感兴趣的同学几乎都会用的一个库,Python接口的opencv玩了一阵子了,最近心血来潮,想要玩 ...
- python调用按键精灵插件_开发中IDE的选择？如何在VsCode上配置CC++,Java,Python环境...
前言 工欲善其事必先利其器,这也是老生常谈的事情了.在做日常开发中,让我感受到一个顺手的开发工具的重要性.截至目前对于不同语言自己也使用过很多开发工具,有一些简单的编辑器例如:notepad++.Ed ...
- VSCode上搭建MDK开发环境
VSCode上搭建MDK开发环境 提示:需先安装MDK编译器(Keil5) 目的:在使用Keil5开发程序中若要使用"Go to"功能需要打开"Browse Inform ...
- 为什么jupyterlab运行程序的时候会自动停止_搭建 Julia 轻量级编写环境（VSCode，JupyterLab）
作为数据科学中的后起之秀,Julia 以其出色的运算速度,受到了不少人媒体的追捧(虽然也不清楚这些写稿的人都用没有).Julia 致力于成为一个全面的数据科学语言,不过由于社区依然不如 Python ...
- vscode使用教程python-如何在VSCode上轻松舒适的配置Python的方法步骤
前言 之前被学长推荐使用了VSCode,后惊叹了VSCode的强大,尤其是他的配置,比之前使用sublime方便多了,刚好实验室也来了一批新的学弟学妹,来仔细的逐步的讲解一些,在自己的电脑上轻松的配置 ...
- vscode 上刷leetcode算法题(含配置)
为什么选择在vscode 上刷leetcode 减少leetcode网页提交次数 提高"提交通过率" 轻量级的,易于debug的IDE 语法高亮美观 方便跑多个测试用例 调试链表, ...
- 使用 dotnet 命令行配合 vscode 完成一个完整 .NET 解决方案的编写和调试
如果你是开发个人项目,那就直接用 Visual Studio Community 版本吧,对个人免费,对小团体免费,不需要这么折腾. 如果你是 Mac / Linux 用户,不想用 Visual St ...
最新文章
- android2.2编译,Android NDK编译Box2D_V2.2
- C++ 三五法则，看看你能不能理解
- python-for循环
- 悠中选优，畅享马尔代夫与塞舌尔之旅
- 关于windows上的exe可执行程序在黑色窗口运行时候不能点击屏幕，要不然会暂定程序
- Acwing1086. 恨7不成妻（未解决）
- 云服务器mqtt协议,云服务器mqtt协议
- Win10安装 WSL Ubuntu Linux系统，非双系统，完美兼容超详细版本
- ipa去除时间锁_Java中的锁以及sychronized实现机制（十）
- 上位机获取单片机发来的数据并进行检验（完整版，附完整源码）
- 从入门到入土（九）手摸手教你搭建RocketMQ双主双从同步集群，不信学不会！...
- lstm原理及实现_LSTM原理
- 142.PHP session 阻塞问题
- 双线性插值公式推导及Matlab实现
- Eclipse debug 的 drop to frame 的技巧
- P1829 [国家集训队]Crash的数字表格
- R绘图| Kaplan-Meier曲线及美化
- 我如何启动任何.NET Core Web API项目
- android 小米手机播放短小音频无声音问题
- ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map