From 61455ac6830e0a05830775350121978ba08fb29b Mon Sep 17 00:00:00 2001
From: Sesh Sadasivam <seshrs@umich.edu>
Date: Wed, 6 Apr 2022 22:23:09 -0700
Subject: [PATCH] Retain most HTML elements in heading label in Table of
 Contents Fixes #160

---
 index.md                                      |  2 +-
 src_js/components/sidebar/TableOfContents.tsx | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/index.md b/index.md
index afc10f02..493a119f 100644
--- a/index.md
+++ b/index.md
@@ -62,7 +62,7 @@ graph TB
 # Setup
 Follow these steps to get your development environment set up.
 
-### Install the dependencies
+### **_Install_** the dependencies
 First make sure that you have Python 3 installed. If you're on MacOS, you may have to `brew install python3` first.
 
 ```console
diff --git a/src_js/components/sidebar/TableOfContents.tsx b/src_js/components/sidebar/TableOfContents.tsx
index 3dc75e25..9b8563a1 100644
--- a/src_js/components/sidebar/TableOfContents.tsx
+++ b/src_js/components/sidebar/TableOfContents.tsx
@@ -187,6 +187,20 @@ function getHeadingLabel(headingNode: HTMLElement): h.JSX.Element {
             );
           } else if (childNode.tagName === 'ABBR') {
             labelComponents.push(<Fragment>{childNode.innerText}</Fragment>);
+          } else if (
+            childNode.tagName === 'A' &&
+            childNode.classList.contains('anchorjs-link')
+          ) {
+            // Skip the AnchorJS link
+            return;
+          } else {
+            // Retain any other HTML elements
+            labelComponents.push(
+              <span
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML={{ __html: childNode.outerHTML }}
+              />,
+            );
           }
           break;
       }