搭建 Markdown 强大写作环境-VS Code

简介: 搭建 Markdown 强大写作环境-VS Code

Markdown 是一种易于读写的轻量级的标记语言,编写出的作品简洁美观,近年来受到了越来越多的追捧,被广泛地用于日常写作,乃至电子书发表。与此同时,一系列优秀 Markdown 编辑器应运而生。其中较为著名的有,Typora(免费,跨平台)、MarkText(开源,跨平台)、Zettlr(开源,跨平台)、MacDown(开源,macOS)等等。


VSCode 是当下最流行的代码编辑器,拥有丰富的扩展,这也使其成为最强大的文本编辑器之一(拒绝伤害 Vim 党人及 Emacs 党人),搞定 Markdown 自然不在话下。与上面提到的编辑器相比,VSCode 的明显优势有:


集成的布局:大纲(outline)、工作区(workspace);

强大的补全:LaTeX 公式;

丰富的扩展:方便整合其他工具(详见下文的功能扩展部分);


安装环境


传送门


插件安装


Markdown All in One


这是个大一统型的扩展,集成了撰写 Markdown 时所需要的大部分功能,是 Markdown 类插件中下载榜榜首。可认为是 VSCode 中的 Markdown 必备扩展。其功能涵盖:


快捷键自动生成并更新目录

自动格式化表格

LaTeX 数学公式支持

1673439568086.jpg

1673439578041.jpg

1673439584922.jpg


Markdown Preview Enhanced


Markdown Preview Enhanced是Markdown预览增强的插件。安装后如图所示

1673439610298.jpg

可以切换各种预览主题

1673439619577.jpg


Paste Image


Paste Image 可以直接从剪贴板粘贴图像到markdown文件中,也可以设置图片保存在本地的路径。

1673439642191.jpg

在当前目录建好存放图片的文件夹,截图后 Ctrl + Alt + V 直接走你,就可以直接把图片粘贴进markdown文件中


Markdown PDF


这个扩展可以将Markdown文件转换为pdf, html, png或jpeg文件。图片转换pdf后也可以直接看到

1673439655716.jpg

导出后

1673439663658.jpg


快捷修改字体颜色


方法:手动添加snippets,在设置文件里补全代码片


三种方法:


通过快捷键「Ctrl + Shift + P」打开命令窗口(All Command Window),输入「snippet」,点选「首选项:配置用户代码片片段」;

点击界面最左侧竖栏(也即活动栏)最下方的齿轮按钮,在弹出来的菜单中点选「用户代码片段」;

按下「Alt」键切换菜单栏,通过文件 > 首选项 > 用户代码片段;

{
  // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
  // Placeholders with the same ids are connected.
  // Example:
  "Change the text color to red": {
  // "scope": "",
  "prefix": "rc",
  "body": [
    "<font color=red>$1</font>"
  ],
  "description": "color red"
  },
  "Change the text color to blue": {
  // "scope": "",
  "prefix": "bc",
  "body": [
    "<font color=blue>$1</font>"
  ],
  "description": "color blue"
  },
  "Change the text color to green": {
  // "scope": "",
  "prefix": "gc",
  "body": [
    "<font color=green>$1</font>"
  ],
  "description": "color green"
  },
  "Change the text br": {
  // "scope": "",
  "prefix": "br",
  "body": [
    "<br/>"
  ],
  "description": "line feed"
  },
  "Change the text div": {
  // "scope": "",
  "prefix": "div",
  "body": [
    "<div id=\"$1\"></div>"
  ],
  "description": "line feed"
  }
}


由于vs code默认不支持markdown的智能提示,于是需要在setting.json中添加如下代码:

"[markdown]": {
        "editor.wordWrap": "on",
        "editor.quickSuggestions": true
    },


然后输入redcolor 会自动替换标签

相关文章
|
3月前
|
API C++
【Azure 环境】VS Code登录China Azure(Function)报错 An error occurred while signing in: invalid_request - AADSTS65002
An error occurred while signing in: invalid_request - AADSTS65002: Consent between first party application 'c27c220f-ce2f-4904-927d-333864217eeb' and first party resource '797f4846-ba00-4fd7-ba43-dac1f8f63013' must be configured via preauthorization - applications owned and operated by Microsoft mus
208 13
|
5月前
|
Ubuntu Linux Shell
Linux环境下VSCode快速安装终极指南:debian/ubuntu/linux平台通用
以上就是在Linux环境下安装VSCode的终极指南,抛开繁复的专业词汇,以平易近人的文字、形象生动的比喻让你轻松学会这一过程。别忘了,你的小伙伴VSCode已经在应用菜单里等你了!
1481 23
|
8月前
|
前端开发 Docker 容器
写作利器,一款极简的Markdown 编辑器
WeChat Markdown Editor 是一款高度简洁的微信 Markdown 编辑器:支持 Markdown 语法、色盘取色、多图上传、一键下载文档、自定义 CSS 样式、一键重置等特性。
432 70
写作利器,一款极简的Markdown 编辑器
|
6月前
|
Python
在VScode环境下配置Python环境的方法
经过上述步骤,你的VSCode环境就已经配置好了。请尽情享受这扇你为自己开启的知识之窗。如同你在冒险世界中前行,你的探索之路只有越走越广,你获得的知识只会越来越丰富,你的能力只会越来越强。
666 37
|
Python
新手向 Python:VsCode环境下Manim配置
该文介绍了如何准备和配置开发环境以使用Manim,主要包括两个步骤:一是准备工作,需要下载并安装VsCode和Anaconda,其中Anaconda需添加到系统PATH环境变量,并通过清华镜像源配置;二是配置环境,VsCode中安装中文插件和Python扩展,激活并配置虚拟环境。最后,安装ffmpeg和manim,通过VsCode运行测试代码验证配置成功。
1512 1
|
Ubuntu Linux 编译器
Linux/Ubuntu下使用VS Code配置C/C++项目环境调用OpenCV
通过以上步骤,您已经成功在Ubuntu系统下的VS Code中配置了C/C++项目环境,并能够调用OpenCV库进行开发。请确保每一步都按照您的系统实际情况进行适当调整。
2347 3
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
网络安全 开发者 Python
VSCode远程切换Python虚拟环境
VSCode远程切换Python虚拟环境
833 1
|
C++ Python
VS Code 搭建 Python 环境 Conda管理
VS Code 搭建 Python 环境 Conda管理
194 2
【Azure 环境】连接到微软云Azure中国区 By VS 2019, VS Code, Powershell
【Azure 环境】连接到微软云Azure中国区 By VS 2019, VS Code, Powershell
372 0
【Azure 环境】连接到微软云Azure中国区 By VS 2019, VS Code, Powershell

热门文章

最新文章

下一篇
oss云网关配置