如何解析 Markdown 锚标签

Question

我正在使用 markdown 写博客 post。它似乎使用一些集合或规则来解析原始文本，例如：

space --> 破折号
大写 --> 小写
特殊字符-->去除或ascii编码

所以，对于这样的 header：

# Hi, I'm José

我需要写这样的代码：

[Click me](#hi-im-jos%C3%A9)

这不是很直观。所以，目前我需要：

创建header
生成页面
检查页面
找到元素
复制 href
粘贴到锚标签中

我的愿望：

创建header
以某种方式解析 header 文本以获得正确的 href
正确书写锚标签

我正在使用 Nuxt.js Content。

Answer 1

获得这些锚点可见性的快速方法是在 nuxt.config.js 中添加一个挂钩。这样你就可以看到打印在控制台中的 id，而无需检查 DOM 元素。

{
  hooks: {
    "content:file:beforeInsert": document => {
      document.toc.forEach(item => {
        console.log(`${item.text} > #${encodeURI(item.id)}`);
      });
    }
  }
}

将在控制台中输出：

Hi, I'm José > #hi-im-jos%C3%A9

如何解析 Markdown 锚标签

How to parse Markdown anchor tags

anchor

markdown

nuxt.js