markdown渲染的一点问题

[TheCoderAlex]

在一个已经有3个二级标题的markdown中添加一个三级标题会导致渲染出的html部分内容消失。主要集中在包含公式的段落及其以后的段落出现消失。例如以下的markdown：

本页面将简要介绍快速排序。

## 定义

快速排序（Quicksort），又称分区交换排序（partition-exchange sort），简称”快排“，是一种被广泛运用的排序算法。

### 测试

## 基本思想

快速排序的思想是，先分两段排序，排序后再递归排序。

- 选择一个 $x$ 作为分界点： $x$ 可以是左端点的数，右端点的数、中间数或者是随机的数。排序复杂度也因分界点的选择而变化。
- 将待排序区间划分为两个子区间。其中，左子区间的所有数都满足小于等于分界点数 $x$ 。右子区间的所有数都满足大于等于分界点数 $x$ 。
- 递归的排序左边区间和右边区间。

## 参考文章

在添加测试这个三级标题前一切正常，添加后页面缺失元素，如下所示：

有趣的是，我使用了本仓库中其他有多级目录的例子试了却没有任何问题。这是为什么？

[pengzhanbo]

🤔 我在我本地用你的例子重现出来了，我也有点懵。
我检查了 markdown-it render 结果，输出正常，检查了 vue sfc template block，输出正常，生成的临时文件 pages/*.vue 输出也正常。但是在浏览器端，多出了一份 数据不对应的 同名虚拟文件，我还在排查它是从什么地方产生的。

[TheCoderAlex]

🤔 我在我本地用你的例子重现出来了，我也有点懵。 我检查了 markdown-it render 结果，输出正常，检查了 vue sfc template block，输出正常，生成的临时文件 pages/*.vue 输出也正常。但是在浏览器端，多出了一份 数据不对应的 同名虚拟文件，我还在排查它是从什么地方产生的。

如果把公式去掉也可以正常输出，会不会是公式的问题？

[pengzhanbo]

如果把公式去掉也可以正常输出，会不会是公式的问题？

我不确定根源是否在于 kateX，它可能只是 bug 的一种体现，因为从 markdown 的编译结果来看，输出是正常的，包括再进一步包装成 vue SFC 的模板字符串，它依然是正常的，不正常的地方，是经过 vite 发送到 浏览器后内容就已经被裁剪了。

而这里 vite 发送到浏览器前需要经过 @vue/compiler 的编译将 template 字符串 做静态分析后再最终输出。
我合理怀疑是在 compiler 阶段出现了问题。

[pengzhanbo]

@TheCoderAlex 可以确定是在 @vue/compiler-sfc 这里出现了问题。

{
  code: 'import { createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"\n' +
    '\n' +
    'export function render(_ctx, _cache) {\n' +
    '  return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [\n' +
    '    _createStaticVNode("<p>本页面将简要介绍快速排序。</p><h2 id=\\"定义\\" tabindex=\\"-1\\"><a class=\\"header-anchor\\" href=\\"#定义\\"><span>定义</span></a></h2><p>快速排序（Quicksort），又称分区交换排序（partition-exchange sort），简称”快排“，是一种被广泛运用的排序算法。</p><h2 id=\\"原理\\" tabindex=\\"-1\\"><a class=\\"header-anchor\\" href=\\"#原理\\"><span>原理</span></a></h2><p>111</p><h2 id=\\"xx\\" tabindex=\\"-1\\"><a class=\\"header-anchor\\" href=\\"#xx\\"><span>xx</span></a></h2><ul><li>xx</li><li>uu</li></ul><h2 id=\\"基本思想\\" tabindex=\\"-1\\"><a class=\\"header-anchor\\" href=\\"#基本思想\\"><span>基本思想</span></a></h2>", 8)\n' +
    '  ])))\n' +
    '}',
  ast: {
    type: 0,
    source: '<template><div><p>本页面将简要介绍快速排序。</p>\n' +
      '<h2 id="定义" tabindex="-1"><a class="header-anchor" href="#定义"><span>定义</span></a></h2>\n' +
      '<p>快速排序（Quicksort），又称分区交换排序（partition-exchange sort），简称”快排“，是一种被广泛运用的排序算法。</p>\n' +
      '<h2 id="原理" tabindex="-1"><a class="header-anchor" href="#原理"><span>原理</span></a></h2>\n' +
      '<p>111</p>\n' +
      '<h2 id="xx" tabindex="-1"><a class="header-anchor" href="#xx"><span>xx</span></a></h2>\n' +
      '<ul>\n' +
      '<li>xx</li>\n' +
      '<li>uu</li>\n' +
      '</ul>\n' +
      '<h2 id="基本思想" tabindex="-1"><a class="header-anchor" href="#基本思想"><span>基本思想</span></a></h2>\n' +
      '<ul>\n' +
      '<li>\n' +
      '<p>快速排序的思想是，先分两段排序，排序后再递归排序。</p>\n' +
      '</li>\n' +
      '<li>\n' +
      '<p>将待排序区间划分为两个子区间。其中，左子区间的所有数都满足小于等于分界点数 <span v-pre class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>x</mi></mrow><annotation encoding="application/x-tex">x</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.4306em;"></span><span class="mord mathnormal">x</span></span></span></span> 。右子区间的所有数都满足大于等于分界点数 <span v-pre class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>x</mi></mrow><annotation encoding="application/x-tex">x</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.4306em;"></span><span class="mord mathnormal">x</span></span></span></span> 。</p>\n' +
      '</li>\n' +
      '<li>\n' +
      '<p>递归的排序左边区间和右边区间。</p>\n' +
      '</li>\n' +
      '</ul>\n' +
      '<h2 id="参考文章" tabindex="-1"><a class="header-anchor" href="#参考文章"><span>参考文章</span></a></h2>\n' +
      '<p>呵呵</p>\n' +
      '<h2 id="源码" tabindex="-1"><a class="header-anchor" href="#源码"><span>源码</span></a></h2>\n' +
      '<p>777</p>\n' +
      '</div></template>\n' +
      '\n' +
      '\n',
  },
  source: '<div><p>本页面将简要介绍快速排序。</p>\n' +
    '<h2 id="定义" tabindex="-1"><a class="header-anchor" href="#定义"><span>定义</span></a></h2>\n' +
    '<p>快速排序（Quicksort），又称分区交换排序（partition-exchange sort），简称”快排“，是一种被广泛运用的排序算法。</p>\n' +
    '<h2 id="原理" tabindex="-1"><a class="header-anchor" href="#原理"><span>原理</span></a></h2>\n' +
    '<p>111</p>\n' +
    '<h2 id="xx" tabindex="-1"><a class="header-anchor" href="#xx"><span>xx</span></a></h2>\n' +
    '<ul>\n' +
    '<li>xx</li>\n' +
    '<li>uu</li>\n' +
    '</ul>\n' +
    '<h2 id="基本思想" tabindex="-1"><a class="header-anchor" href="#基本思想"><span>基本思想</span></a></h2>\n' +
    '<ul>\n' +
    '<li>\n' +
    '<p>快速排序的思想是，先分两段排序，排序后再递归排序。</p>\n' +
    '</li>\n' +
    '<li>\n' +
    '<p>将待排序区间划分为两个子区间。其中，左子区间的所有数都满足小于等于分界点数 <span v-pre class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>x</mi></mrow><annotation encoding="application/x-tex">x</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.4306em;"></span><span class="mord mathnormal">x</span></span></span></span> 。右子区间的所有数都满足大于等于分界点数 <span v-pre class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>x</mi></mrow><annotation encoding="application/x-tex">x</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.4306em;"></span><span class="mord mathnormal">x</span></span></span></span> 。</p>\n' +
    '</li>\n' +
    '<li>\n' +
    '<p>递归的排序左边区间和右边区间。</p>\n' +
    '</li>\n' +
    '</ul>\n' +
    '<h2 id="参考文章" tabindex="-1"><a class="header-anchor" href="#参考文章"><span>参考文章</span></a></h2>\n' +
    '<p>呵呵</p>\n' +
    '<h2 id="源码" tabindex="-1"><a class="header-anchor" href="#源码"><span>源码</span></a></h2>\n' +
    '<p>777</p>\n' +
    '</div>',
}

可以看到， 最终产物 code， 和 source对比， 明显被裁剪了一部分。具体原因是什么，这个需要深入分析了。
这应该是 vue 的 bug 了。

[TheCoderAlex]

@pengzhanbo 在markdown文件中启用 <!-- markdownlint-disable md025 --> 注释后在本地dev环境中可以正常完整显示了，但是 vuepress build docs 生成的静态页面仍然无法显示

[pengzhanbo]

@TheCoderAlex

vue playground

这是一个可以稳定复现的 bug，我还是去 vue 社区反馈下吧

[TheCoderAlex]

@TheCoderAlex

vue playground

这是一个可以稳定复现的 bug，我还是去 vue 社区反馈下吧

好的，多谢！

[pengzhanbo]

@TheCoderAlex #11879

[TheCoderAlex]

@TheCoderAlex #11879

好的。我将vue版本锁到3.4了，现在没啥问题，等更新。

[coderwei99]

一种工作方式: 移除外层的div vue playground

[pengzhanbo]

@TheCoderAlex 该bug 已在 [email protected] 中修复。

[TheCoderAlex]

@TheCoderAlex 该bug 已在 [email protected] 中修复。

收到，已更新。关闭issue了。