Repository: Python-Markdown/markdown (python)

Issue:
Allow TOC element to use a custom CSS class
```markdown
[TOC]
# Header 1
```

will currently generate the following HTML:

```html
<div class="toc">
  <ul>
    <li><a href="#header-1">Header 1</a></li>
  </ul>
</div>
<h1 id="header-1">Header 1</h1>
```

The `class="toc"` cannot be changed, although using custom classes are supported for anchorlinks (`anchorlink_class`) and permalinks (`permalink_class`).

I suggest that another config parameter `toc_class` that defaults to the current class `toc` is introduced. This is useful if in use with CSS frameworks that apply certain styles to prose content but allow disabling the additional styles when a certain class is present. For TailwindCSS, the extension could be called like so:

```python
md = markdown.Markdown(extensions=[TocExtension(toc_class="toc not-prose")]
``` 

Pull request:
Support custom CSS class on TOC element
Closes #1224

Patch:
diff --git a/docs/change_log/release-3.4.md b/docs/change_log/release-3.4.md
index 71f9a20..025d443 100644
--- a/docs/change_log/release-3.4.md
+++ b/docs/change_log/release-3.4.md
@@ -51,6 +51,10 @@ The following new features have been included in the 3.3 release:
       Ex: `[{}]` will give <sup>[1]</sup>, `({})` will give <sup>(1)</sup>,
       or just by default, the current behavior: <sup>1</sup>.
 
+* The [Table of Contents](../extensions/toc.md) extension now accepts a `toc_class`
+  parameter which can be used to set the CSS class(es) on the `<div>` that contains the
+  Table of Contents (#1224).
+
 ## Bug fixes
 
 The following bug fixes are included in the 3.4 release:
diff --git a/docs/extensions/toc.md b/docs/extensions/toc.md
index 8dce335..8d7bd35 100644
--- a/docs/extensions/toc.md
+++ b/docs/extensions/toc.md
@@ -151,6 +151,9 @@ The following options are provided to configure the output:
 * **`title`**:
     Title to insert in the Table of Contents' `<div>`. Defaults to `None`.
 
+* **`toc_class`**:
+    CSS class(es) used for the `<div>` containing the Table of Contents. Defaults to `toc`.
+
 * **`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
index 57d2e3b..80138b3 100644
--- a/markdown/extensions/toc.py
+++ b/markdown/extensions/toc.py
@@ -160,6 +160,7 @@ class TocTreeprocessor(Treeprocessor):
         self.base_level = int(config["baselevel"]) - 1
         self.slugify = config["slugify"]
         self.sep = config["separator"]
+        self.toc_class = config["toc_class"]
         self.use_anchors = parseBoolValue(config["anchorlink"])
         self.anchorlink_class = config["anchorlink_class"]
         self.use_permalinks = parseBoolValue(config["permalink"], False)
@@ -239,7 +240,7 @@ class TocTreeprocessor(Treeprocessor):
     def build_toc_div(self, toc_list):
         """ Return a string div given a toc list. """
         div = etree.Element("div")
-        div.attrib["class"] = "toc"
+        div.attrib["class"] = self.toc_class
 
         # Add title to the div
         if self.title:
@@ -328,6 +329,9 @@ class TocExtension(Extension):
             "title": ["",
                       "Title to insert into TOC <div> - "
                       "Defaults to an empty string"],
+            "toc_class": ['toc',
+                          'CSS class(es) used for the link. '
+                          'Defaults to "toclink"'],
             "anchorlink": [False,
                            "True if header should be a self link - "
                            "Defaults to False"],
diff --git a/mkdocs.yml b/mkdocs.yml
index c5a82ac..4c53ac3 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -41,6 +41,7 @@ nav:
   - Test Tools: test_tools.md
   - Contributing to Python-Markdown: contributing.md
   - Change Log: change_log/index.md
+  - Release Notes for v.3.4: change_log/release-3.4.md
   - Release Notes for v.3.3: change_log/release-3.3.md
   - Release Notes for v.3.2: change_log/release-3.2.md
   - Release Notes for v.3.1: change_log/release-3.1.md


Test patch:
diff --git a/tests/test_syntax/extensions/test_toc.py b/tests/test_syntax/extensions/test_toc.py
index 6871340..d879f6e 100644
--- a/tests/test_syntax/extensions/test_toc.py
+++ b/tests/test_syntax/extensions/test_toc.py
@@ -569,3 +569,46 @@ class TestTOC(TestCase):
             '<p>[TOC]<br />\ntext</p>',
             extensions=[TocExtension(), Nl2BrExtension()]
         )
+
+    def testTOCWithCustomClass(self):
+
+        self.assertMarkdownRenders(
+            self.dedent(
+                '''
+                [TOC]
+                # Header
+                '''
+            ),
+            self.dedent(
+                '''
+                <div class="custom">
+                <ul>
+                <li><a href="#header">Header</a></li>
+                </ul>
+                </div>
+                <h1 id="header">Header</h1>
+                '''
+            ),
+            extensions=[TocExtension(toc_class="custom")]
+        )
+
+    def testTOCWithCustomClasses(self):
+        self.assertMarkdownRenders(
+            self.dedent(
+                '''
+                [TOC]
+                # Header
+                '''
+            ),
+            self.dedent(
+                '''
+                <div class="custom1 custom2">
+                <ul>
+                <li><a href="#header">Header</a></li>
+                </ul>
+                </div>
+                <h1 id="header">Header</h1>
+                '''
+            ),
+            extensions=[TocExtension(toc_class="custom1 custom2")]
+        )