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 · 81e7e6c · 81e7e6c
1 parent fab3c55
commit 81e7e6c
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 20 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
@@ -485,7 +485,6 @@ def render(self, source: str) -> str:
         """Render the HTML output for a Markdown source."""
         return str(super().__call__(source))
 
-
 def markdown2html_mistune(source: str) -> str:
     """Convert a markdown string to HTML using mistune"""
     return MarkdownWithMath(renderer=IPythonRenderer(escape=False)).render(source)
@@ -501,7 +500,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
@@ -516,16 +514,13 @@ def extract_titles_from_markdown_input(markdown_input):
     # Parse the Markdown
     extract_titles(markdown_input)
 
-    # renderer.headings is an array for each markdown element
-    # print(renderer.headings)
-
     # Extracted headings
-    for level, title in renderer.headings:
+    for level, title in renderer.headings: # renderer.headings is an array for each markdown element
         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/base.html.j2 b/share/templates/lab/base.html.j2
@@ -5,7 +5,6 @@
 {%- block body_header -%}
 {%- endblock body_header -%}
 
-
 {% block codecell %}
 {%- if not cell.outputs -%}
 {%- set no_output_class="jp-mod-noOutputs" -%}

diff --git a/share/templates/lab/index.html.j2 b/share/templates/lab/index.html.j2
@@ -126,28 +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 -%}
 
 {% block body_footer %}

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;