zero-md icon indicating copy to clipboard operation
zero-md copied to clipboard

Discussion: Anchor.js usability (for on-hover anchor links)

Open alifeee opened this issue 1 year ago • 5 comments

I would like to use AnchorJS with zero-md.

This adds the little anchors to headings, so you can click them to link to the heading from elsewhere. e.g., in all GitHub markdown. i.e.,

image

They suggest using it like

import 'https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js';
anchors.add();

However, it selects the headings using document.querySelectorAll

https://github.com/bryanbraun/anchorjs/blob/7820d5f6a6d41eb92000ab9c22b9362262a6b8a8/anchor.js#L274-L286

From what I understand about shadow DOMs, this is incompatible with the way zero-md works.

Am I right in thinking this way?

Mermaid similarities

It seems similar to how Mermaid is currently suggested to be used:

https://github.com/zerodevx/zero-md/issues/65

https://zerodevx.github.io/zero-md/recipes/#support-mermaid-diagrams

For now, I must disable the shadow DOM. #82 currently breaks this.

Should it be in the remit of these external libraries (Mermaid/AnchorJS) to allow use with the shadow DOM, or is it just something that will never be supported by them?

alifeee avatar Jun 22 '23 17:06 alifeee