如何在标号中给出标题的自定义标识？

Question

我使用markdown to jsx作为标记解析器。我如何才能给出一个自定义id的标题中的标记？### Generation of keys {#custom-id}给出：

<h3 id="generation-of-keys-custom-id">Generation of keys {#key-generation}</h3>

但我想：

<h3 id="custom-id">Generation of keys </h3>

Answer 1

由于标价到-jsx当前存在，所以不能用它来完成这一任务。您可以通过在slugify上写入一些自定义的论据函数来更改ID，但是不能更改标题中的内容。

在这里，是相关代码吗？介绍了它如何从JSX创建Heading组件。用于解析标题的下面是正则表达式：

/^ *(#{1,6}) *([^\n]+?)(?: +#*)?(?:\n *)*(?:\n|$)/

形象化

​

​

您可以看到，它们捕获了两条信息：

1. “级别”(又名h1，通过h6)
2. 以及标题的文本

回到库中，在_parse函数中，我们从正则表达式匹配返回一个对象：

_parse(capture, parse, state) {
  return {
    content: parseInline(parse, capture[2], state),
    id: options.slugify(capture[2]),
    level: capture[1].length,
  }
},

您可以看到，他们使用该id选项创建了一个slugify属性(该选项具有正常的默认值)。这里是您更改ID形成方式的机会。

但是，您可以看到content没有任何定制空间。

然后，库使用一个_react函数来最终将解析的对象转换为一个JSX节点：

_react(node, output, state) {
  node.tag = `h${node.level}`;
  return (
    <node.tag id={node.id} key={state._key}>
      {output(node.content, state)}
    </node.tag>
  )
},

我会考虑在存储库上打开一个PR，它有第三个捕获组，使用一些预定义的语法(可能是使用{#custom-id-here} )。否则，您可以打开一个PR来提供另一个可选函数，在content传递到最终的_react调用之前转换它。