Add new anchor_class snippet parameter

- Allow users to explicitly define the class each anchor element in the TOC should have
allejo · Sep 5, 2018 · 7cffa78 · 7cffa78
1 parent 17b9ff3
commit 7cffa78
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -34,17 +34,18 @@ Alright, so how do you use it?
 
 This snippet is highly customizable. Here are the available parameters to change the behavior of the snippet.
 
-| Parameter  |  Type  | Default | Description |
-| ---------  | :----: | :-----: | ----------- |
-| `html`     | string | <sup>*</sup> | the HTML of compiled markdown generated by kramdown in Jekyll |
-| `sanitize` | bool   | false  | when set to true, the headers will be stripped of any HTML in the TOC |
-| `class`    | string | ''     | a CSS class assigned to the TOC; concat multiple classes with '.' |
-| `id`       | string | ''     | an ID to be assigned to the TOC |
-| `h_min`    | int    | 1      | the minimum TOC header level to use; any heading lower than this value will be ignored |
-| `h_max`    | int    | 6      | the maximum TOC header level to use; any heading greater than this value will be ignored |
-| `ordered`  | bool   | false  | when set to true, an ordered list will be outputted instead of an unordered list |
-| `item_class` | string | ''   | add custom class for each list item; has support for `%level%` placeholder, which is the current heading level |
-| `baseurl`  | string | ''     | add a base url to the TOC links for when your TOC is on another page than the actual content |
+| Parameter      |  Type  | Default | Description |
+| -------------- | :----: | :-----: | ----------- |
+| `html`         | string | <sup>*</sup> | the HTML of compiled markdown generated by kramdown in Jekyll |
+| `sanitize`     | bool   | false  | when set to true, the headers will be stripped of any HTML in the TOC |
+| `class`        | string | ''     | a CSS class assigned to the TOC; concat multiple classes with '.' |
+| `id`           | string | ''     | an ID to be assigned to the TOC |
+| `h_min`        | int    | 1      | the minimum TOC header level to use; any heading lower than this value will be ignored |
+| `h_max`        | int    | 6      | the maximum TOC header level to use; any heading greater than this value will be ignored |
+| `ordered`      | bool   | false  | when set to true, an ordered list will be outputted instead of an unordered list |
+| `item_class`   | string | ''     | add custom class for each list item; has support for `%level%` placeholder, which is the current heading level |
+| `baseurl`      | string | ''     | add a base url to the TOC links for when your TOC is on another page than the actual content |
+| `anchor_class` | string | ''     | add custom class(es) for each anchor element |
 
 <sup>*</sup> This is a required parameter
 

diff --git a/_includes/toc.html b/_includes/toc.html
@@ -1,6 +1,6 @@
 {% capture tocWorkspace %}
     {% comment %}
-        Version 1.0.5
+        Version 1.0.6
           https://github.com/allejo/jekyll-toc
 
         "...like all things liquid - where there's a will, and ~36 hours to spare, there's usually a/some way" ~jaybe
@@ -9,20 +9,22 @@
             {% include toc.html html=content sanitize=true class="inline_toc" id="my_toc" h_min=2 h_max=3 %}
 
         Parameters:
-            * html       (string) - the HTML of compiled markdown generated by kramdown in Jekyll
+            * html         (string) - the HTML of compiled markdown generated by kramdown in Jekyll
 
         Optional Parameters:
-            * sanitize   (bool)   : false  - when set to true, the headers will be stripped of any HTML in the TOC
-            * class      (string) :   ''   - a CSS class assigned to the TOC
-            * id         (string) :   ''   - an ID to assigned to the TOC
-            * h_min      (int)    :   1    - the minimum TOC header level to use; any header lower than this value will be ignored
-            * h_max      (int)    :   6    - the maximum TOC header level to use; any header greater than this value will be ignored
-            * ordered    (bool)   : false  - when set to true, an ordered list will be outputted instead of an unordered list
-            * item_class (string) :   ''   - add custom class for each list item; has support for '%level%' placeholder, which is the current heading level
-            * baseurl    (string) :   ''   - add a base url to the TOC links for when your TOC is on another page than the actual content
+            * sanitize     (bool)   : false  - when set to true, the headers will be stripped of any HTML in the TOC
+            * class        (string) :   ''   - a CSS class assigned to the TOC
+            * id           (string) :   ''   - an ID to assigned to the TOC
+            * h_min        (int)    :   1    - the minimum TOC header level to use; any header lower than this value will be ignored
+            * h_max        (int)    :   6    - the maximum TOC header level to use; any header greater than this value will be ignored
+            * ordered      (bool)   : false  - when set to true, an ordered list will be outputted instead of an unordered list
+            * item_class   (string) :   ''   - add custom class(es) for each list item; has support for '%level%' placeholder, which is the current heading level
+            * baseurl      (string) :   ''   - add a base url to the TOC links for when your TOC is on another page than the actual content
+            * anchor_class (string) :   ''   - add custom class(es) for each anchor element
 
         Output:
-            An ordered or unordered list representing the table of contents of a markdown block. This snippet will only generate the table of contents and will NOT output the markdown given to it
+            An ordered or unordered list representing the table of contents of a markdown block. This snippet will only
+            generate the table of contents and will NOT output the markdown given to it
     {% endcomment %}
 
     {% capture my_toc %}{% endcapture %}
@@ -70,7 +72,7 @@
         {% endunless %}
 
         {% capture my_toc %}{{ my_toc }}
-{{ space }}{{ listModifier }} {{ listItemClass }} [{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}]({% if include.baseurl %}{{ include.baseurl }}{% endif %}#{{ html_id }}){% endcapture %}
+{{ space }}{{ listModifier }} {{ listItemClass }} [{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}]({% if include.baseurl %}{{ include.baseurl }}{% endif %}#{{ html_id }}){% if include.anchor_class %}{:.{{ include.anchor_class }}}{% endif %}{% endcapture %}
     {% endfor %}
 
     {% if include.class %}

diff --git a/_tests/anchorClass.md b/_tests/anchorClass.md
@@ -0,0 +1,15 @@
+---
+---
+
+{% capture markdown %}
+# Heading 1
+{% endcapture %}
+{% assign text = markdown | markdownify %}
+
+{% include toc.html html=text anchor_class="anchor-link" %}
+
+<!-- /// -->
+
+<ul>
+    <li><a href="#heading-1" class="anchor-link">Heading 1</a></li>
+</ul>
diff --git a/_tests/anchorClassMultiple.md b/_tests/anchorClassMultiple.md
@@ -0,0 +1,15 @@
+---
+---
+
+{% capture markdown %}
+# Heading 1
+{% endcapture %}
+{% assign text = markdown | markdownify %}
+
+{% include toc.html html=text anchor_class="anchor-link.another-class" %}
+
+<!-- /// -->
+
+<ul>
+    <li><a href="#heading-1" class="anchor-link another-class">Heading 1</a></li>
+</ul>