markdown编辑环境搭建

最新推荐文章于 2024-03-29 09:34:24 发布

龙猫讲电子

最新推荐文章于 2024-03-29 09:34:24 发布

阅读量1.1k

点赞数 1

分类专栏：工具文章标签： vscode github

本文链接：https://blog.csdn.net/Wcat_PIG/article/details/127405315

版权

工具专栏收录该内容

1 篇文章 0 订阅

订阅专栏

摘要：这篇文章主要介绍我本人搭建Markdown编辑环境的全过程，并记录下在这个过程中所遇到的问题及解决方法。

一、VS Code安装

进入VS Code官网:VS Code官网
然后根据自己的电脑下载对应版本：Window建议下载System Installer(这个版本可以修改安装路径)

然后同意协议、下一步，就OK了

VS Code安装完后会自动弹出一个询问是否安装中文插件的界面，直接点安装即可

如果没有，可以直接在扩展(快捷键：Ctrl+Shift+X)中搜索：Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code，然后点击安装

二、MPE插件安装

Markdown Preview Enhanced插件(简称MPE)的安装和简体中文一样，也是直接在扩展中搜索Markdown Preview Enhanced，然后安装即可

正确安装MPE后，VS Code文本编辑区域右上角会出现如下图标(点击该图标就可以实现实时渲染)

另外，在MPE插件的细节中有一份特性说明文档，其介绍了如何在MPE中使用Pandoc、自定义预览CSS、生成toc等功能的配置，讲得非常详细，建议大家仔细看看

三、Pandoc

Markdown Preview Enhanced支持pandoc文档导出特性，并且兼容各种文本格式，例如：pdf、Word、html等

最棒的是可以自定义导出样式，极大地减少了Markdown转Word二次排版的痛苦

3.1 Pandoc安装

进入Pandoc官网下载安装包，然后直接安装即可

然后进入MPE的扩展设置中，设置Pandoc的可执行程序路径

有时候可能无法打开扩展设置，提示“当前工作区不受信任”，此时需要手动信任该插件并重启软件

3.2 front Matter

Pandoc安装后在MPE预览区单击右键，就会出现Pandoc导出选项，单击即可导出文档，但大多数新手通常会遇到如下提示：

Error: Output format needs to be specified.

出现这个问题，是因为我们的文档没有增加front matter

将front matter编辑在文档头部，如下图，然后再重新选择Pandoc导出即可(各位可以根据喜欢的格式编写front Matter，并且Pandoc还可以使用自定义样式来导出docx文档)

附上图片中front matter代码：

---
title: Markdown编辑环境搭建
author: Wcat
date: 2022年10月16日
# 指定汉字字体，如果缺少中文显示将不正常
CJKmainfont: 方正苏新诗柳楷简体-yolan
 latex 选项
fontsize: 12pt
linkcolor: blue
urlcolor: green
citecolor: cyan
filecolor: magenta
toccolor: red
geometry: margin=0.3in
papersize: A4
documentclass: article

# pandoc设置
output:
  word_document:
    path: C:/Users/Wcat/Desktop/Habits.docx
# 打印背景色
# 保存文件时自动生成
# export_on_save:
#   pandoc: true
---

四、图床搭建

4.1 创建仓库

登陆GitHub账户(没有可自行注册)，进入GitHub主界面，点击New或者Create a new repository都可以

填写仓库的基本信息后，点击创建仓库即可

4.2 配置picgo

搭建图床我们使用的是picgo插件，其安装方式同MPE

然后需要在GitHub生成token,操作如下：点击settings–>developer settings–>Personal access tokens–>generate new token–>填写名称、勾选repo–>generate token；具体操作可参考文章：在VS Code中使用 Picgo + jsDelivr + Github搭建高速稳定图床

然后进入到picgo的扩展设置，按照图示进行配置(其中https://cdn.jsdelivr.net/gh是用来加速优化网站打开速度的)

使用快捷键Ctrl+Alt+E插入图片到Markdown文档中，如果上传成功会有如下提示，同时进入GitHub仓库也能看到上传的图片

此时刷新下MPE即可在预览区显示图片，如果无法显示，可以将图片网址复制到浏览器看是否能显示图片

如果出现“无法访问此网站，检查raw.githubusercontent.com中是否有拼写错误”，可以按照如下步骤解决：

进入IP或域名查询网站,在搜索框输入：raw.githubusercontent.com，点击查询
逐一去ping解析出来的IP地址，选出延迟低的IP地址

然后找到C:\Windows\System32\drivers\etc中的hosts文件，用记事本打开，在最后添加以下内容

185.199.108.133 raw.githubusercontent.com

重启VS Code，刷新MPE预览区即可

参考资料

在VS Code中使用 Picgo + jsDelivr + Github搭建高速稳定图床

win10 解决raw.githubusercontent.com无法连接问题

pandoc如何使用自定义样式导出docx文档