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

new header anchor links mode (using #) #279

Closed
vincent-peugnet opened this issue Jan 14, 2023 · 2 comments
Closed

new header anchor links mode (using #) #279

vincent-peugnet opened this issue Jan 14, 2023 · 2 comments
Labels
enhancement New feature or request render engine

Comments

@vincent-peugnet
Copy link
Owner

Add a second mode that add a clickable # after the heading text.

%<element>?headeranchor=(0|1)%

New syntax:

%<element>?headeranchor=(0|1|2)%

Where mode 2 is the clickable #

@vincent-peugnet vincent-peugnet changed the title header anchor links new header anchor links mode Jan 14, 2023
@vincent-peugnet vincent-peugnet changed the title new header anchor links mode new header anchor links mode (#) Jan 14, 2023
@vincent-peugnet vincent-peugnet changed the title new header anchor links mode (#) new header anchor links mode (using #) Jan 14, 2023
@n-peugnet
Copy link
Collaborator

n-peugnet commented Jan 24, 2023

The <a> surrounding th # should have a class for easy styling.

For instance, Sphinx adds a headerlink class to these links (inspect https://www.sphinx-doc.org/en/master/)

It is also a good idea not to add whitespace between the <a> and the rest of the title, to avoid this kind of issue : readthedocs/sphinx_rtd_theme#1412
Another possibility to avoid it is to use a non-breaking space &nbsp; to separate it from the rest of the title but then you have less styling flexibility.

@vincent-peugnet
Copy link
Owner Author

I just note another option we've tested:

<h1>Titre un peu long oh yeah<span class="headerlink nbsp">&nbsp;</span><a href="#titre" class="headerlink">#</a></h1>

Putting the &nbsp; inside a <span> tag allow advanced users to remove it using CSS easily.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request render engine
Projects
None yet
Development

No branches or pull requests

2 participants