使用vscode编辑markdown文件(可粘贴截图)

使用markdown粘贴截图时,操作步骤比较多:

1)截取图片;

2)将图片存在特定位置;

3)记住图片路径,在markdown文件中编写代码;

4)预览效果;

而word之类的文档编辑器,只需要截图后,执行粘贴操作即可,特别方便。

希望在编写markdown时也支持这个操作,查阅资料后发现,可以借助VS Code的Paste Image插件实现:

截图后,执行 Ctrl + Alt + V 操作,即可完成图片存盘、生成markdown嵌入图片的代码、效果预览三个步骤。

这里记录下,以便后续查阅。

一、vscode安装及配置

vscode官方网址:https://code.visualstudio.com/

使用vscode编辑markdown文件(可粘贴截图)

支持主流的操作系统:

使用vscode编辑markdown文件(可粘贴截图)

点击下载即可获取,如果下载过慢,也可从百度网盘获取,路径如下:

https://pan.baidu.com/s/1joCkmtTbUpSKDK4QLZRS0A

文件列表如下:

使用vscode编辑markdown文件(可粘贴截图)

关注微信公众号(聊聊博文,文末可扫码)后回复 2022041701 获取提取码。

安装markdown扩展

可以使用Markdown All in One,当然也可以选择其它插件,看个人喜好了。

使用vscode编辑markdown文件(可粘贴截图)

markdown语法及示例

1、标题

使用 # 字符来标注标题,一级标题一个 # 字符,二级标题两个 # 字符,以此类推。

示例如下:

使用vscode编辑markdown文件(可粘贴截图)

2、段落

创建段落,需要使用空格或空白行将文本进行分割。

示例如下:

使用vscode编辑markdown文件(可粘贴截图)

3、列表

3.1 有序列表

创建有序列表,需要在每个列表项前添加数字,并紧跟一个英文句号,列表数字需要从1开始。

使用vscode编辑markdown文件(可粘贴截图)

3.2 无序列表

创建无序列表,需要在列表项前面添加如下英文字符(三选一):

+

*

可单独使用,也可混合使用,示例如下:

使用vscode编辑markdown文件(可粘贴截图)

4、粗体及斜体

加粗文本,可以使用两个星号( )或下划线()包括,斜体字,可以使用一个星号()或下划线()包括。

示例如下:

使用vscode编辑markdown文件(可粘贴截图)

5、代码及代码块

代码块可以使用反引号()进行包裹,单行代码用一个反引号,多行代码用三个反引号。</p> <p>示例如下:</p> <p><img alt="使用vscode编辑markdown文件(可粘贴截图)" src="https://johngo-pic.oss-cn-beijing.aliyuncs.com/articles/20230605/300959-20220418000814659-2118696054.png" /></p> <p><strong>6、分隔线</strong></p> <p>分隔线,可以使用三个或多个星号(***)、破折号(---)或下划线(___)来实现:</p> <p>1)需要在单独一行上使用;</p> <p>2)不能包含其它内容;</p> <p>示例如下:</p> <p><img alt="使用vscode编辑markdown文件(可粘贴截图)" src="https://johngo-pic.oss-cn-beijing.aliyuncs.com/articles/20230605/300959-20220418000828669-282960836.png" /></p> <p><strong>7、链接</strong></p> <p>格式:</p> <p><code>[链接文字描述](链接地址  “链接说明”)</code></p> <p>或</p> <p><code><链接地址><!--链接地址--></code></p> <p>或html语法</p> <p><code><a href="“超链接地址”" title="“超链接title”">超链接显示名</a></code></p> <p><code>示例如下:</code></p> <p><img alt="使用vscode编辑markdown文件(可粘贴截图)" src="https://johngo-pic.oss-cn-beijing.aliyuncs.com/articles/20230605/300959-20220418000853205-1026539574.png" /></p> <p><strong>8、图片</strong></p> <p>markdown语法如下:</p> <p><code>![图片描述](图片链接 “图片title”)</code></p> <p>对应的html代码:</p> <p><code><img src="图片链接" alt="图片描述" title="图片title"></code></p> <p>带链接的图片语法:</p> <p><code>[![图片描述](图片链接 “图片title”)](图片链接)</code></p> <p><code>示例如下:</code></p> <p><img alt="使用vscode编辑markdown文件(可粘贴截图)" src="https://johngo-pic.oss-cn-beijing.aliyuncs.com/articles/20230605/300959-20220418000909517-1751823265.png" /></p> <p><strong>9、其它</strong></p> <p>9.1 转义字符</p> <p>如果需要使用markdown语法里面的字符,可在字符前添加反斜杠(\)字符。</p> <p>可做转义的字符如下:</p> <p>字符 名称 \ 反斜杠 反引号 * 星号 _ 下划线 {} 大括号 [] 中括号 () 括号 # #号 + 加号 – 减号 . 点 ! 叹号 | 竖线

9.2 内嵌html

markdown支持html语法,可直接在文件用。

二、使用Paste Image插件粘贴截图

1、安装vscode插件

使用vscode编辑markdown文件(可粘贴截图)

2、配置Paste Image插件

1)配置图片存储路径

默认是markdown文件所在的文件夹,可以设置自定义文件夹(会自动创建),比如:

${currentFileDir}/images/

2)配置图片前缀格式:

使用vscode编辑markdown文件(可粘贴截图)

3)操作效果

示例:

使用vscode编辑markdown文件(可粘贴截图)

参考文档:

https://markdown.com.cn/basic-syntax/lists.html

Original: https://www.cnblogs.com/MikeZhang/p/vscode-markdow-20220417.html
Author: Mike_Zhang
Title: 使用vscode编辑markdown文件(可粘贴截图)

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/603918/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • JDBC编程

    文章目录 一、JDBC简介 二、驱动的下载 三、JDBC的使用 * DriverManager DataSource Connection Statement ResultSet …

    Python 2023年10月26日
    039
  • Pytest学习笔记

    1.pytest命名规范 2.pytest运行方式 3.pytest常用的执行参数 4.pytest框架结构 5.Fixture的作用 6.Fixture 用法 7.conftes…

    Python 2023年9月14日
    030
  • 前端—基于Flask框架调用百度接口实现语音识别功能(使用蓝图blueprint)

    配合”基于Flask框架调用百度接口实现语音识别功能”使用的前端参考代码 后端代码链接 Python—基于Flask框架调用百度接口实现语音识别功能:基于F…

    Python 2023年8月10日
    076
  • pandas(2)DataFrame

    pandas(2)DataFrame 本节目标:DataFrame的概念和操作 本节技术点:DataFrame 本节阅读需要(15)min。本节实操需要(15)min。 文章目录 …

    Python 2023年8月7日
    050
  • pandas函数及方法

    目录 1. weekday()和reindex()的组合 2. query方法 3. eval方法 4. assign函数 5. merge函数 6. groupby函数 7. p…

    Python 2023年8月17日
    071
  • dataframe小技巧

    一.基本操作篇 1.新建自己定义column_name: import pandas as pd df = pd.DataFrame(columns=[‘col1′,’col2’,…

    Python 2023年8月8日
    030
  • Python爬虫从入门到精通:(29)scrapy数据持久化存储(基于管道)(重点)_Python涛哥

    终端指令存储数据是方便,但只能存储到固定的格式,也不能存储到数据库里。 那怎么可以存储到不同的格式和数据库呢? 这时我们就需要用到管道! 我们看下框架里另外两个文件: items….

    Python 2023年10月5日
    034
  • gerapy运行scrapy程序,报错timeout

    最近在使用scrapy开发项目。 scrapy的项目,使用了代理, 然后在本地运行,一切正常,数据能够正常抓取。 部署到线上的gerapy里运行起来后报错,日志显示: 2022-1…

    Python 2023年10月1日
    031
  • Python+Selenium基础篇之6-元素定位方法

    WebDriver 提供了 8 种元素定位方法,在 Python 中,对应的方法如下: id 定位 → find_element_by_id() name 定位 → find_…

    Python 2023年5月24日
    061
  • scrapy中添加ip池的方法

    scrapy中添加ip池的方法 我使用的是scrapy2.2setting 中写下ip池 IPPOOL = [ {‘ipaddr’:’221.230.72.165:80′}, {‘…

    Python 2023年10月2日
    027
  • 腾讯云服务器上线Django后台项目

    作为前端工程师而言,随着我们技术的不断提高,我们都在想怎么让自己写的网页项目上线,但这个的前提是有一个属于自己的服务器,而且对于前端需要上线的项目,我们需要一个后台来获取我们所需要…

    Python 2023年8月3日
    043
  • Flask数据库

    文章目录 一、ORM * 1.1 什么是ORM 1.2 ORM的优缺点有哪些? 1.3 Flask-SQLAlchemy安装及设置 1.4 其他配置信息 1.5 常用的SQLAlc…

    Python 2023年8月11日
    077
  • shoppe项目08—-购物车

    目录 购物车数据结构 添加购物车 查看购物车 购物车数据结构 由于购物车数据量小,且数据变化比较频繁,所以采用Redis内存数据库来存储,采用的数据类型如下: 存储商品数据,采用h…

    Python 2023年8月6日
    068
  • 【编程实践/嵌入式比赛】嵌入式比赛学习记录(一):TCP服务器和web界面的建立

    0. 前言 最近找同学参加了嵌入式比赛,为了让自己的简历不显得一穷二白,可惜我本人是计算机专业的学生,因此大部分的工作是上位机开发,可能也会搞一下WIFI模块。由于在此过程中还是学…

    Python 2023年8月10日
    061
  • [趣味][人工智能生成文字]chatGPT使用教程

    啊哦~你想找的内容离你而去了哦 内容不存在,可能为如下原因导致: ① 内容还在审核中 ② 内容以前存在,但是由于不符合新 的规定而被删除 ③ 内容地址错误 ④ 作者删除了内容。 可…

    Python 2023年11月3日
    046
  • 使用koa2+es6/7打造高质量Restful API

    如今nodejs变得越来越火热,采用nodejs实现前后端分离架构已被多数大公司所采用。 下面,我们来探讨下,如何使用koa2+es6/7来打造高质量的Restful风格API。 …

    Python 2023年6月15日
    074
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球