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

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

---
title: 【我的文章】
author: Yvvhfdbvcbu
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 inputString
            return { content: frontMatterString, table: "", data: data || {} };
        }
        else if (hideFrontMatter ||
            this.config.frontMatterRenderingOption[0] === "n") {
            // 不渲染
            // hide
            return { content: "", table: "", data };
        }
        else if (this.config.frontMatterRenderingOption[0] === "t") {	
        	// 渲染表格
            // table
            // to table
            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] === "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 inputString
            return { content: frontMatterString, table: "", data: data || {} };
        }
        else if (hideFrontMatter ||
            this.config.frontMatterRenderingOption[0] === "n") {
            // hide
            return { 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") {
        	// custom
            const 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">Yvvhfdbvcbu</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修改为false
    isForPreview: false,
    runAllCodeChunks,
}));

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