Footnotes

Introduction

By default, the footnotes section is placed after the main content at the end of the resulting HTML document. If your document contains both footnotes and endnotes, the footnotes section will be placed before the endnotes section.

The footnotes section is composed of several configurable elements which can be customized to suit your specific needs.

Wrapper
Heading
Footnotes list
Footnotes list item

Full Example

{
  ...
  "footnotesWrapper": {
    "enabled": true,
    "element": {
      "name": "div",
      "attrs": {
        "class": "footnotes-section"
      }
    }
  },
  "footnotesHeading": {
    "enabled": true,
    "element": {
      "name": "h2",
      "content": "Footnotes"
    }
  },
  "footnotesList": {
    "enabled": true,
    "element": {
      "name": "ul"
    }
  },
  "footnotesListItem": {
    "enabled": true,
    "element": {
      "name": "li"
    }
  }
  ...
}

▸

<div class="footnotes-section">
  <h2>
    Footnotes
  </h2>
  <ul>
    <li>
      Footnote text
    </li>
    ...
  </ul>
</div>

Wrapper

Default wrapper element

By default a div element with the attribute class="footnotes-section" will be generated as the wrapper element for the footnotes section in the resulting HTML document.

"footnotesWrapper": {
  "enabled": true,
  "element": {
    "name": "div",
    "attrs": {
      "class": "footnotes-section"
    }
  }
}

▸

<div class="footnotes-section">
  ...
</div>

Custom wrapper element

You can customize the type of wrapper element to be created by modifying the value of the footnotesWrapper.element.name property. In the example below a section element will be used instead of the default div element.

"footnotesWrapper": {
  "enabled": true,
  "element": {
    "name": "section",
    "attrs": {
      "class": "footnotes-section"
    }
  }
}

▸

<section class="footnotes-section">
  ...
</section>

Custom wrapper attributes

The footnotesWrapper.element.attrs option allows you to add an unlimited number of attributes to the footnotes wrapper element in the resulting HTML document.

"footnotesWrapper": {
    "enabled": true,
    "element": {
      "name": "div",
      "attrs": {
        "data-section": "footnotes"
      }
    }
  }

▸

<div data-section="footnotes">
  ...
</div>

Disabling the wrapper element

You can also disable the generation of the wrapper element alltogether by setting the value of the footnotesWrapper.enabled property to false.

Heading

Default heading element

By default a h2 element with the text "Footnotes" and no attributes will be generated as the heading for the footnotes section in the resulting HTML document.

"footnotesHeading": {
  "enabled": true,
  "element": {
    "name": "h2",
    "content": "Footnotes"
  }
}

▸

<h2>
  Footnotes
</h2>

Custom heading element

You can customize the type of heading element to be created by modifying the value of the footnotesHeading.element.name property. In the example below a div element will be used instead of the default h2 element.

"footnotesHeading": {
  "enabled": true,
  "element": {
    "name": "div",
    "content": "Footnotes"
  }
}

▸

<div>
  Footnotes
</div>

Custom heading attributes

The footnotesHeading.element.attrs option allows you to add an unlimited number of attributes to the footnotes heading element in the resulting HTML document.

"footnotesHeading": {
  "enabled": true,
  "element": {
    "name": "h2",
    "content": "Footnotes",
    "attrs": {
      "class": "footnotes-heading",
      "data-foo": "bar"
    }
  }
}

▸

<h2 
  class="footnotes-heading" 
  data-foo="bar"
>
  Footnotes
</h2>

Custom heading content

You can customize the content of the footnotes heading element by modifying the value of the footnotesHeading.element.content property. In the example below the content of the footnotes heading element is changed to "Notes".

"footnotesHeading": {
  "enabled": true,
  "element": {
    "name": "h2",
    "content": "Notes"
  }
}

▸

<h2>
  Notes
</h2>

Disabling the heading element

You can also disable the generation of a footnotes heading element alltogether by setting the value of the footnotesHeading.enabled property to false.

List

Default list element

By default an ol element will be generated as list element in the footnotes section of the resulting HTML document.

"footnotesList": {
  "enabled": true,
  "element": {
    "name": "ul"
  }
}

▸

<ul>
  ...
</ul>

Custom list element

You can customize the type of list element to be created by modifying the value of the footnotesList.element.name property. In the example below a ol element will be created instead of the default ul element.

"footnotesList": {
  "enabled": true,
  "element": {
    "name": "ol",
  }
}

▸

<ol>
  ...
</ol>

Custom list attributes

The footnotesList.element.attrs option allows you to add an unlimited number of attributes to the footnotes list element in the resulting HTML document.

"footnotesList": {
    "enabled": true,
    "element": {
      "name": "ul",
      "attrs": {
        "class": "footnotes-list"
    }
  }

▸

<ul class="footnotes-list">
  ...
</ul>

Disabling the list element

You can also disable the generation of the list element alltogether by setting the value of the footnotesList.enabled property to false.

List item

Default list item element

By default a li element will be generated as list item element in the footnotes section of the resulting HTML document.

"footnotesListItem": {
  "enabled": true,
  "element": {
    "name": "li"
  }
}

▸

<li>
  Footnote text
</li>

Custom list item element

You can customize the type of list item element to be created by modifying the value of the footnotesListItem.element.name property. In the example below a div element will be created instead of the default li element.

"footnotesListItem": {
  "enabled": true,
  "element": {
    "name": "div",
  }
}

▸

<div>
  Footnote text
</div>

Custom list item attributes

The footnotesListItem.element.attrs option allows you to add an unlimited number of attributes to the footnotes list item element in the resulting HTML document.

"footnotesListItem": {
    "enabled": true,
    "element": {
      "name": "li",
      "attrs": {
        "class": "footnote-list-item"
    }
  }

▸

<li class="footnote-list-item">
  Footnote text
</li>

Disabling the list item element

You can also disable the generation of the list item element alltogether by setting the value of the footnotesListItem.enabled property to false.