Add links to be able to go to the relevant sections when clicking on …

…the items of the table of contents.
jupyter · Sep 17, 2024 · 6b3946a · 6b3946a
1 parent fab3c55
commit 6b3946a
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 14 deletions.
diff --git a/.gitignore b/.gitignore
@@ -41,7 +41,7 @@ docs/source/config_options.rst
 .vscode
 
 # Downloaded theme files
-share/templates/lab/static/index.css
+#share/templates/lab/static/index.css
 share/templates/lab/static/theme-dark.css
 share/templates/lab/static/theme-light.css
 share/templates/classic/static/style.css
diff --git a/nbconvert/filters/markdown_mistune.py b/nbconvert/filters/markdown_mistune.py
@@ -501,7 +501,6 @@ def heading(self, text, level):
         self.headings.append((level, text))
         return ""  # We return an empty string to avoid outputting the headings
 
-
 def extract_titles_from_markdown_input(markdown_input):
     # Markdown_input is a single string with all the markdown content concatenated
     # Initiate list of titles
@@ -517,15 +516,14 @@ def extract_titles_from_markdown_input(markdown_input):
     extract_titles(markdown_input)
 
     # renderer.headings is an array for each markdown element
-    # print(renderer.headings)
 
     # Extracted headings
     for level, title in renderer.headings:
         children = title["children"]
         attrs = title["attrs"]
         raw_text = children[0]["raw"]
         level = attrs["level"]
-        titles_array.append([level, raw_text])
-
-    print(titles_array)
+        id = raw_text.replace(' ', '-')
+        href= "#" + id
+        titles_array.append([level, raw_text, id, href])
     return titles_array
diff --git a/share/templates/lab/index.html.j2 b/share/templates/lab/index.html.j2
@@ -126,27 +126,54 @@ a.anchor-link {
 <body class="jp-Notebook" data-jp-theme-light="true" data-jp-theme-name="JupyterLab Light">
 {% endif %}
 <main>
+{%- block tableofcontents -%}
+<div class="jp-RenderedHTMLTOC-Title">Table of contents</div>
 {%- for item in resources.tableofcontents -%}
-{%- set (level, text) = item -%}
+{%- set (level, text, id, href) = item -%}
 {%- if level==1 -%}
-<h1>{{text}}</h1>
+<div class="jp-RenderedHTMLCommon jp-RenderedHTMLTOC-Item-h1">
+<a href={{href}}>
+{{text}}
+</a>
+</div>
 {%- endif -%} 
 {%- if level==2 -%}
-<h2>{{text}}</h2>
+<div class="jp-RenderedHTMLCommon jp-RenderedHTMLTOC-Item-h2">
+<a href={{href}}>
+{{text}}
+</a>
+</div>
 {%- endif -%}
 {%- if level==3 -%}
-<h3>{{text}}</h3>
+<div class="jp-RenderedHTMLCommon jp-RenderedHTMLTOC-Item-h3">
+<a href={{href}}>
+{{text}}
+</a>
+</div>
 {%- endif -%}
 {%- if level==4 -%}
-<h4>{{text}}</h4>
+<div class="jp-RenderedHTMLCommon jp-RenderedHTMLTOC-Item-h4">
+<a href={{href}}>
+{{text}}
+</a>
+</div>
 {%- endif -%}
 {%- if level==5 -%}
-<h5>{{text}}</h5>
+<div class="jp-RenderedHTMLCommon jp-RenderedHTMLTOC-Item-h5">
+<a href={{href}}>
+{{text}}
+</a>
+</div>
 {%- endif -%}
 {%- if level==6 -%}
-<h6>{{text}}</h6>
+<div class="jp-RenderedHTMLCommon jp-RenderedHTMLTOC-Item-h6">
+<a href={{href}}>
+{{text}}
+</a>
+</div>
 {%- endif -%}
 {%- endfor -%}
+{% endblock tableofcontents %}
 
 {%- endblock body_header -%}
 

diff --git a/share/templates/lab/static/index.css b/share/templates/lab/static/index.css
@@ -4043,7 +4043,6 @@ button.jp-Dialog-close-button {
   font-weight: bold;
 }
 
-
 .jp-RenderedHTMLTOC-Item-h1 {
   font-family: var(--jp-content-font-family);
   font-size: 20px;