Fix Python-Markdown#1293 Support more customizable toc

pauloxnet · Aug 10, 2023 · 44a88b6 · 44a88b6
1 parent 8ae73a0
commit 44a88b6
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 4 deletions.
diff --git a/docs/extensions/toc.md b/docs/extensions/toc.md
@@ -151,9 +151,18 @@ The following options are provided to configure the output:
 * **`title`**:
     Title to insert in the Table of Contents' `<div>`. Defaults to `None`.
 
+* **`title_class`**:
+    CSS class used for the title contained in the Table of Contents. Defaults to `toctitle`.
+
+* **`title_tag`**:
+    HTML tag used for the title contained in the Table of Contents. Defaults to `span`.
+
 * **`toc_class`**:
     CSS class(es) used for the `<div>` containing the Table of Contents. Defaults to `toc`.
 
+* **`toc_tag`**:
+    HTML tag used for the element containing the Table of Contents. Defaults to `div`.
+
 * **`anchorlink`**:
     Set to `True` to cause all headers to link to themselves. Default is `False`.
 

diff --git a/markdown/extensions/toc.py b/markdown/extensions/toc.py
@@ -161,6 +161,9 @@ def __init__(self, md, config):
         self.slugify = config["slugify"]
         self.sep = config["separator"]
         self.toc_class = config["toc_class"]
+        self.toc_tag = config["toc_tag"]
+        self.title_tag = config["title_tag"]
+        self.title_class = config["title_class"]
         self.use_anchors = parseBoolValue(config["anchorlink"])
         self.anchorlink_class = config["anchorlink_class"]
         self.use_permalinks = parseBoolValue(config["permalink"], False)
@@ -245,13 +248,15 @@ def add_permalink(self, c, elem_id):
 
     def build_toc_div(self, toc_list):
         """ Return a string div given a toc list. """
-        div = etree.Element("div")
-        div.attrib["class"] = self.toc_class
+        div = etree.Element(self.toc_tag)
+        if self.toc_class:
+            div.attrib["class"] = self.toc_class
 
         # Add title to the div
         if self.title:
-            header = etree.SubElement(div, "span")
-            header.attrib["class"] = "toctitle"
+            header = etree.SubElement(div, self.title_tag)
+            if self.title_class:
+                header.attrib["class"] = self.title_class
             header.text = self.title
 
         def build_etree_ul(toc_list, parent):
@@ -335,9 +340,18 @@ def __init__(self, **kwargs):
             "title": ["",
                       "Title to insert into TOC <div> - "
                       "Defaults to an empty string"],
+            "title_class": ['toctitle',
+                          'CSS class used for the title. '
+                          'Defaults to "toctitle"'],
+            "title_tag": ['span',
+                          'HTML tag used for the title. '
+                          'Defaults to "span"'],
             "toc_class": ['toc',
                           'CSS class(es) used for the link. '
                           'Defaults to "toclink"'],
+            "toc_tag": ['div',
+                          'HTML tag used for the toc. '
+                          'Defaults to "div"'],
             "anchorlink": [False,
                            "True if header should be a self link - "
                            "Defaults to False"],

diff --git a/tests/test_syntax/extensions/test_toc.py b/tests/test_syntax/extensions/test_toc.py
@@ -629,3 +629,114 @@ def testTOCWithCustomClasses(self):
             ),
             extensions=[TocExtension(toc_class="custom1 custom2")]
         )
+
+    def testTOCWithEmptyClass(self):
+
+        self.assertMarkdownRenders(
+            self.dedent(
+                '''
+                [TOC]
+                # Header
+                '''
+            ),
+            self.dedent(
+                '''
+                <div>
+                <ul>
+                <li><a href="#header">Header</a></li>
+                </ul>
+                </div>
+                <h1 id="header">Header</h1>
+                '''
+            ),
+            extensions=[TocExtension(toc_class="")]
+        )
+
+    def testTOCWithCustomTag(self):
+
+        self.assertMarkdownRenders(
+            self.dedent(
+                '''
+                [TOC]
+                # Header
+                '''
+            ),
+            self.dedent(
+                '''
+                <details class="toc">
+                <ul>
+                <li><a href="#header">Header</a></li>
+                </ul>
+                </details>
+                <h1 id="header">Header</h1>
+                '''
+            ),
+            extensions=[TocExtension(toc_tag="details")]
+        )
+
+    def testTOCWithCustomTitleTag(self):
+
+        self.assertMarkdownRenders(
+            self.dedent(
+                '''
+                [TOC]
+                # Header
+                '''
+            ),
+            self.dedent(
+                '''
+                <div class="toc">
+                <div class="toctitle">ToC</div>
+                <ul>
+                <li><a href="#header">Header</a></li>
+                </ul>
+                </div>
+                <h1 id="header">Header</h1>
+                '''
+            ),
+            extensions=[TocExtension(title_tag="div", title='ToC')]
+        )
+
+    def testTOCWithCustomTitleClass(self):
+
+        self.assertMarkdownRenders(
+            self.dedent(
+                '''
+                [TOC]
+                # Header
+                '''
+            ),
+            self.dedent(
+                '''
+                <div class="toc"><span class="tocname">ToC</span><ul>
+                <li><a href="#header">Header</a></li>
+                </ul>
+                </div>
+                <h1 id="header">Header</h1>
+                '''
+            ),
+            extensions=[TocExtension(title_class="tocname", title='ToC')]
+        )
+
+    def testTOCAsDetailsWithSummary(self):
+
+        self.assertMarkdownRenders(
+            self.dedent(
+                '''
+                [TOC]
+                # Header
+                '''
+            ),
+            self.dedent(
+                '''
+                <details>
+                <summary>Summary</summary>
+                <ul>
+                <li><a href="#header">Header</a></li>
+                </ul>
+                </details>
+                <h1 id="header">Header</h1>
+                '''
+            ),
+            extensions=[TocExtension(title='Summary', title_class="", title_tag="summary", toc_class="", toc_tag="details")]
+        )