Estoy usando markdown to jsx como analizador de markdown. ¿Cómo puedo dar una identificación personalizada a un encabezado en Markdown? ### Generation of keys {#custom-id} está dando:
<h3 id="generation-of-keys-custom-id">Generation of keys {#key-generation}</h3>pero yo quiero:
<h3 id="custom-id">Generation of keys </h3>No puede hacer esto con markdown-to-jsx como existe actualmente. Puede cambiar la ID escribiendo alguna función de slugify personalizada en el argumento de options , pero no podrá cambiar el contenido dentro del encabezado.
Aquí está el código relevante de cómo crea componentes de Heading desde JSX. Aquí está la expresión regular que usa para analizar el encabezado:
/^ *(#{1,6}) *([^\n]+?)(?: +#*)?(?:\n *)*(?:\n|$)/Visualizado como
Puedes ver que capturan dos piezas de información:
h1 a h6 ) Volviendo a la biblioteca, en la función _parse , devolvemos un objeto de nuestra coincidencia de expresión regular:
_parse(capture, parse, state) { return { content: parseInline(parse, capture[2], state), id: options.slugify(capture[2]), level: capture[1].length, } }, Puede ver que crean una propiedad de id usando esas opciones slugify (que tiene un valor predeterminado sensato). Esta es su oportunidad de cambiar la forma en que se forma la identificación.
Sin embargo, puede ver que el content no tiene espacio para la personalización.
Luego, la biblioteca usa una función _react para finalmente transformar el objeto analizado en un nodo 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> ) }, Buscaría abrir un PR en el repositorio, que tiene un tercer grupo de captura que usa alguna sintaxis predefinida (quizás con {#custom-id-here} como lo tiene). De lo contrario, puede abrir un PR para proporcionar otra función opcional que transforme el content antes de que pase a la llamada final de _react .