手动调整VS Code下Markdown Preview Enhanced插件中Front-Matter的渲染方式

我曾用过一些静态博客框架撰写并发布文章，这些静态博客框架均采用 Front-Matter 管理文章信息。这导致了我非常多的 Markdown 文章开头都带有诸如这样的内容：

---
title: 【我的文章】
author: Voimmamored
date: "2023-01-13 23:20:00"
---

目前我已弃用博客框架。但是，曾经在博客框架下写作时，Front matter 内的信息会被渲染成文章标题，而 VS Code 下 Markdown Preview Enhanced 插件默认不会渲染 Front matter。这导致我长期以来习惯的文章结构改变了，所有文章都没了标题支撑，一时间弄得我很不适应。

在 Extension Settings 中可以看到，插件默认关闭渲染，但提供了 表格 和 代码块 两种渲染 Front matter 的方式。而 Markdown Preview Enhanced 是一款开源的插件。于是我只要找到相关程序稍作修改即可实现用 Front matter 渲染文章标题的效果。

插件本体的路径：C:\Users\User\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.6.5（后文简称插件目录）。

为找到相关程序，使用 VS Code 打开插件目录，按下Crtl + Shift + F 开启全局搜索，输入关键词front matter。

注意，VS Code可能会自动省略node_modules文件夹下的搜索，点击files to exclude下的齿轮按钮即可取消。

现在我们找到了关于 Front matter 渲染的程序，其在插件目录下的相对路径为：
node_modules\@shd101wyy\mume\out\src\markdown-engine.js。

直接定位到控制 Front matter 渲染的源代码：

/*** process input string, skip front-matter* if usePandocParser. return {*      content: frontMatterString* }* else if display table. return {*      table: string of <table>...</table> generated from data*      content: ''* }* else return {*      content: replace ---\n with ```yaml* }**/
processFrontMatter(frontMatterString, hideFrontMatter = false) {if (frontMatterString) {const data = utility.parseYAML(frontMatterString);if (this.config.usePandocParser) {// use pandoc parser, so don't change inputStringreturn { content: frontMatterString, table: "", data: data || {} };}else if (hideFrontMatter ||this.config.frontMatterRenderingOption[0] === "n") {// 不渲染// hidereturn { content: "", table: "", data };}else if (this.config.frontMatterRenderingOption[0] === "t") {	// 渲染表格// table// to tablelet table;if (typeof data === "object") {table = this.frontMatterToTable(data);}else {table = "<pre>Failed to parse YAML.</pre>";}return { content: "", table, data };} else {// 渲染代码块// if (this.config.frontMatterRenderingOption[0] === "n") {const content = frontMatterString.replace(/^---/, "```yaml").replace(/\n---$/, "\n```\n");return { content, table: "", data };}}else {return { content: frontMatterString, table: "", data: {} };}
}

此处注释和代码都写得很清楚，不多赘述。
我们可以直接把其中一个条件分支拿来用，把里面的效果改成自己想要的即可。

如果你想要和我一样保留原本的设置，可以手动在插件目录的package.json文件内添加一个渲染选项，此处我添加的选项名为custom：

"markdown-preview-enhanced.frontMatterRenderingOption": {"description": "Front matter rendering option","type": "string","enum": ["none","table","code block","custom"],"default": "none"
},

处理后的程序（未注释部分为新增代码）：

frontMatterToInfo(arg) {let info = "";for (const key in arg) {info += `<div class = ${key}>${arg[key]}</div>`;}return info;
}/*processFrontMatter(frontMatterString, hideFrontMatter = false) {if (frontMatterString) {const data = utility.parseYAML(frontMatterString);if (this.config.usePandocParser) {// use pandoc parser, so don't change inputStringreturn { content: frontMatterString, table: "", data: data || {} };}else if (hideFrontMatter ||this.config.frontMatterRenderingOption[0] === "n") {// hidereturn { content: "", table: "", data };}else if (this.config.frontMatterRenderingOption[0] === "t") {let table;if (typeof data === "object") {table = this.frontMatterToTable(data);}else {table = "<pre>Failed to parse YAML.</pre>";}return { content: "", table, data };*/} else if (this.config.frontMatterRenderingOption[0] === "c") {// customconst content = this.frontMatterToInfo(data);return { content, table: "", data };/* } else {const content = frontMatterString.replace(/^---/, "```yaml").replace(/\n---$/, "\n```\n");return { content, table: "", data };}}else {return { content: frontMatterString, table: "", data: {} };}
}*/

现在，上文的Front matter:

title: 【我的文章】
author: Voimammored
date: "2023-01-13 23:20:00"

会在文章起始处被渲染为：

<div class = "title">【我的文章】</div>
<div class = "author">Voimammored</div>
<div class = "date">2023-01-13 23:20:00</div>

现在我们就能使用CSS自定义样式了。当然，换用其他的标签，或者直接在标签内嵌入style都是可以的。

需要注意的是，现在渲染出的Front matter仅存在于预览界面中，而导出时会被自动移除。如果需要保留，同样可以在markdown-engine.js中调整。

例如，我想在导出为HTML文件时保留渲染后的 Front matter，只需要将htmlExport方法的部分修改。

let yamlConfig;
({ html, yamlConfig } = yield this.parseMD(inputString, {useRelativeFilePath: true,hideFrontMatter: true,		// 将hideFrontMatter修改为falseisForPreview: false,runAllCodeChunks,
}));

同理，导出其他格式时都有类似的设置，需要的话手动修改即可。