Add anchors to Markdown headers

frontend/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx

@@ -43,6 +43,60 @@ export interface Props {
   allowHTML: boolean
 }
 
+function createAnchorFromText(text: string | null): string {
+  const newAnchor = text
+    ?.toLowerCase()
+    .split(/[^A-Za-z0-9]/)
+    .filter(Boolean)
+    .join("-")
+  return newAnchor || ""
+}
+
+function createHeadingWithAnchor() {
+  let alreadyScrolled = false
+  return function({ tag, anchor, children }: any): ReactElement {
+    const ref = React.useCallback(
+      node => {
+        if (node !== null && !alreadyScrolled) {
+          const hash = window.location.hash.slice(1)
+          if (hash === (anchor || createAnchorFromText(node.textContent))) {
+            node.scrollIntoView(true)
+            alreadyScrolled = true
+          }
+        }
+      },
+      [anchor]
+    )
+    return React.createElement(tag, { ref }, children)
+  }
+}
+
+const HeadingWithAnchor = createHeadingWithAnchor()
+
+function CustomHeading({ level, children }: any): ReactElement {
+  return <HeadingWithAnchor tag={`h${level}`}>{children}</HeadingWithAnchor>
+}
+
+function CustomParsedHtml(props: any): ReactElement {
+  const {
+    element: {
+      type,
+      props: { "data-anchor": anchor, children },
+    },
+  } = props
+
+  const headingElements = ["h1", "h2", "h3", "h4", "h5", "h6"]
+  if (!headingElements.includes(type)) {
+    return (ReactMarkdown.renderers.parsedHtml as any)(props)
+  }
+
+  return (
+    <HeadingWithAnchor tag={type} anchor={anchor}>
+      {children}
+    </HeadingWithAnchor>
+  )
+}
+
 /**
  * Wraps the <ReactMarkdown> component to include our standard
  * renderers and AST plugins (for syntax highlighting, HTML support, etc).
@@ -71,6 +125,8 @@ class StreamlitMarkdown extends PureComponent<Props> {
       math: (props: { value: string }): ReactElement => (
         <BlockMath>{props.value}</BlockMath>
       ),
+      heading: CustomHeading,
+      parsedHtml: CustomParsedHtml,
     }
 
     const plugins = [RemarkMathPlugin, RemarkEmoji]

lib/streamlit/elements/markdown.py

@@ -78,14 +78,18 @@ def markdown(self, body, unsafe_allow_html=False):
 
         return self.dg._enqueue("markdown", markdown_proto)
 
-    def header(self, body):
+    def header(self, body, anchor=None):
         """Display text in header formatting.
 
         Parameters
         ----------
         body : str
             The text to display.
 
+        anchor : str
+            The anchor name of the header that can be accessed with #anchor
+            in the URL. If omitted, it generates an anchor using the body.
+
         Example
         -------
         >>> st.header('This is a header')
@@ -96,17 +100,25 @@ def header(self, body):
 
         """
         header_proto = MarkdownProto()
-        header_proto.body = "## %s" % clean_text(body)
+        if anchor is None:
+            header_proto.body = f'## {clean_text(body)}'
+        else:
+            header_proto.body = f'<h2 data-anchor="{anchor}">{clean_text(body)}</h2>'
+            header_proto.allow_html = True
         return self.dg._enqueue("markdown", header_proto)
 
-    def subheader(self, body):
+    def subheader(self, body, anchor=None):
         """Display text in subheader formatting.
 
         Parameters
         ----------
         body : str
             The text to display.
 
+        anchor : str
+            The anchor name of the header that can be accessed with #anchor
+            in the URL. If omitted, it generates an anchor using the body.
+
         Example
         -------
         >>> st.subheader('This is a subheader')
@@ -117,7 +129,12 @@ def subheader(self, body):
 
         """
         subheader_proto = MarkdownProto()
-        subheader_proto.body = "### %s" % clean_text(body)
+        if anchor is None:
+            subheader_proto.body = f'### {clean_text(body)}'
+        else:
+            subheader_proto.body = f'<h3 data-anchor="{anchor}">I{clean_text(body)}</h3>'
+            subheader_proto.allow_html = True
+
         return self.dg._enqueue("markdown", subheader_proto)
 
     def code(self, body, language="python"):
@@ -153,7 +170,7 @@ def code(self, body, language="python"):
         code_proto.body = clean_text(markdown)
         return self.dg._enqueue("markdown", code_proto)
 
-    def title(self, body):
+    def title(self, body, anchor=None):
         """Display text in title formatting.
 
         Each document should have a single `st.title()`, although this is not
@@ -164,6 +181,10 @@ def title(self, body):
         body : str
             The text to display.
 
+        anchor : str
+            The anchor name of the header that can be accessed with #anchor
+            in the URL. If omitted, it generates an anchor using the body.
+
         Example
         -------
         >>> st.title('This is a title')
@@ -174,7 +195,11 @@ def title(self, body):
 
         """
         title_proto = MarkdownProto()
-        title_proto.body = "# %s" % clean_text(body)
+        if anchor is None:
+            title_proto.body = f'# {clean_text(body)}'
+        else:
+            title_proto.body = f'<h1 data-anchor="{anchor}">{clean_text(body)}</h1>'
+            title_proto.allow_html = True
         return self.dg._enqueue("markdown", title_proto)
 
     def latex(self, body):