Markdown should render titles and headings with <a> tags to allow in-page links

[nthmost]

Problem

It should be possible to make in-page links so that the app user can click on a title (e.g. within a Table of Contents) to reach the labeled part of the app quickly.

godot63 on the streamlit forum writes:

I would like to write something like:
[Station information](#Station-information)
where in the document there is a ‘# Station information’ title in the same doc. This seems to work on git but does not in my Streamlit app.

Links to look at:

• Desired behavior working in Github
• Behavior not in evidence in Streamlit app

Solution

MVP: The easiest thing is just to give every Markdown title and heading an automatic <a href="#title"> when it is rendered as HTML in React.

Possible enhancement: As an alternate or additional solution, it might be nice for users to have something like st.label("station-info") to create <a href="#station-info"> when the app is rendered. Then you could create in-page links without also needing to write a title or heading to the screen.

Additional context

https://discuss.streamlit.io/t/links-to-same-document-in-md-document/1265

[nthmost]

per @tvst:

I think there's a design question there about whether the titles should be clickable at all
Or maybe we should show a ¶ sign on hover next to the title, and the sign is clickable

(Or maybe a 🔗 sign)

[nishnash54]

Is anyone working on this? I would love to contribute.
Let me know if anything is planned in regard to this issue. 😄

[nthmost]

Hi @nishnash54, apologies for the late reply -- If you're interested in contributing on this feature, you can email me directly at naomi@streamlit.io -- we've been adjusting our policies in terms of coordinating community contributions, especially as our team has been growing quickly, plus an unexpected pandemic. :)

[nthmost]

Clarifications per @treuille

1. st.title, st.header, and st.subheader have an additional anchor kwarg
2. By default anchor=None which implies that the anchor is set automatically to be a lower-dash-case version of the title text, e.g.:
   • st.title(‘Cooking Instructions‘) → the anchor is cooking-instructions
     • Same forst.write(‘# Cooking Instructions’)
   • st.subheader(‘Real-time rendering’) → the anchor is real-time-rendering
     • Same for st.write(‘## Real-time rendering’)
3. Adding a #anchor to the URL automagically centers the page on that anchor
   • I think we get this for free, right? [yes]