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

feat: add unique ids to generated html #16

Merged
merged 2 commits into from
Apr 25, 2022
Merged

feat: add unique ids to generated html #16

merged 2 commits into from
Apr 25, 2022

Conversation

tommilligan
Copy link
Owner

Closes #15

I investigated whether there was an easy 'click to link to this admonition', but it's not clear to me what the UX of this should be, so that's open if anyone wants to work on it.

@schungx
Copy link
Contributor

schungx commented Apr 25, 2022

Probably best to also put a hyperlink <a> tag on the title pointing to the id, just like MarkDown titles. This way it is much easier to "Copy Link".

As for the particular id itself, it doesn't really matter, as any non-conflicting ID would work fine. The current implementation seems fine to me!

@schungx
Copy link
Contributor

schungx commented Apr 25, 2022

<div class="admonition abstract">
<div id="admonition-what-is-this" class="admonition abstract">
<div class="admonition-title">
<a href="#admonition-what-is-this"><p>What <i>is</i> this?</p></a>
</div>
<div>

@tommilligan
Copy link
Owner Author

Probably best to also put a hyperlink <a> tag on the title pointing to the id, just like MarkDown titles. This way it is much easier to "Copy Link".

Agreed - however this will require some level of styling/css changes which I don't have bandwidth for at the moment:

  • wrapping the title in an a tag causes some formatting issues that need to be ironed out
  • what happens if you have a hyperlink in the title already
    • maybe an icon that appears on hover would be better

For this PR I'll just merge the id attachment as that's simple and uncontroversial - if anyone wants to contribute a copy-on-link feature I'd be very open to it!

@tommilligan tommilligan merged commit 2a78ccb into main Apr 25, 2022
@tommilligan tommilligan deleted the anchor-ids branch April 25, 2022 15:01
@schungx
Copy link
Contributor

schungx commented Apr 26, 2022

Without an anchor tag, some browsers (e.g. Chrome & FireFox) don't give a Copy Link Address option, which makes it difficult to actually get that auto-generated link id.

I've found that the following seems to work well enough, which is how mdbook does it for headings:

<p><a class="header" href="#my-id-link">The admonition title</a></p>

The formatting will be seamless, and you can now Copy Link Address by right-clicking on the admonition title.

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.

Add ID from title
2 participants