在VSCode中进行Markdown写作

2,851 阅读1分钟

插件MPE:Markdown Preview Enhanced

读懂官方文档

官方文档中设置那部分写的比较简单,如官方文档:HTML 导出。这一段代码其实是直接写在 Markdown 文件里的,开头写这个,然后写正文。这段代码的作用是,可以在导出 HTML 文件的时候实现一些自定义配置。

---
html:
  embed_local_images: false
  embed_svg: true
  offline: false
  toc: undefined
print_background: false
---

更多的选项见文档。

参考文章

一篇神文:在 VSCode 下用 Markdown Preview Enhanced 愉快地写文档

我在这里概括一下这篇文章的内容。

高亮及其他扩展语法

  1. {==高亮文字==}
  2. {~~删除文字~>替换文字~~}
  3. {>>隐藏批注<<}
  4. {++下划线++}
  5. ^上标^~下标~
  6. emoji :smile:

前面4种扩展语法据说叫 CriticMarkup,好像不加外面大括号也行。

画图

支持的渲染参考官方文档:图像

导入其他文件

而且如果导入了代码也可以执行哦:

@import "code.py" {cmd=/user/bin/python hide}

表格单元格合并

危:在文档里跑代码

打开这个功能意味着如果你打开其他人的 Markdown 文档,其中的代码也会被执行!所以打开这个功能的时候不要查看别人的 Markdown 文件!

代码的输出也会经过解析器,也就是说你可以用代码动态输出一个表格、公式等。

生成目录

现在大多数 Markdown 解析器都能通过 [TOC] 生成目录,但是这行代码可以直接将目录的文本插入到文件中,而不是在解析的时候生成:

<!-- @import "[TOC]" {cmd="toc" depthFrom=2 depthTo=3 orderedList=false} -->

一些比较好用的设置选项

自动显示浏览效果:

image.png

Markdown的原始语法中两行之前必须有一个空行,强制分段。这个选项可以只换行,不换段:

第一行
这样也能换行,和上一行之间的距离比段落距离短
之前只能这样换行

这样实际上是换了新段落,行间距比较大

image.png

设置inline、block数学公式如何输入:

image.png

"markdown-preview-enhanced.mathBlockDelimiters": [
    [
        "$$",
        "$$"
    ],
    [
        "\\[",
        "\\]"
    ]
],
"markdown-preview-enhanced.mathInlineDelimiters": [
    [
        "$",
        "$"
    ],
    [
        "\\(",
        "\\)"
    ]
],

导出PDF

右键预览界面可以打印PDF,如果报错:

"princexml" is required to be installed.

安装prince并添加到环境变量中即可。但是遗憾的是导出的文件和浏览的文件并不一致,而且我用mermaid画的图并没有出来……

参考文章VSCode问题:"princexml" is required to be installed