Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add copiable anchor links to headings #145

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

Kiarokh
Copy link
Collaborator

@Kiarokh Kiarokh commented Aug 16, 2024

All documentation pages have this feature that allows readers to copy a link of the specific section within a page, and send it to others. Normally this copy-link feature appears on hover, beside headings (h1, h2, etc…) within the text.

image image

In our case, we badly need this feature in Lime Elements docs, when you wanna send people to a certain example that explains a certain feature, prop, or similar.

The first line of comment block that you write in the example file will be converted to an h5 element in the DOM, like below:

<div id="root"><h5>Some heading</h5></div>

So if we get that to have an id, we will be able to use it as an anchor link, like below:

<div id="root"><h5 id="some-heading">Some heading</h5></div>

This way we can navigate to this section of the documentations, by adding the id inside the url of a page in the docs.

We can use this `id` as an anchor link, to scroll to certain
sections in the documentations page.
@Kiarokh Kiarokh changed the title docs(components): create separated examples to showcase markdown add copiable anchor links to headings Aug 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant