Endnotes

Introduction

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

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

Wrapper
Heading
Endnotes list
Endnotes list item

Full Example

{
  ...
  "endnotesWrapper": {
    "enabled": true,
    "element": {
      "name": "div",
      "attrs": {
        "class": "endnotes-section"
      }
    }
  },
  "endnotesHeading": {
    "enabled": true,
    "element": {
      "name": "h2",
      "content": "Endnotes"
    }
  },
  "endnotesList": {
    "enabled": true,
    "element": {
      "name": "ul"
    }
  },
  "endnotesListItem": {
    "enabled": true,
    "element": {
      "name": "li"
    }
  }
  ...
}

▸

<div class="endnotes-section">
  <h2>
    Endnotes
  </h2>
  <ul>
    <li>
      Endnote text
    </li>
    ...
  </ul>
</div>

Wrapper

Default wrapper element

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

"endnotesWrapper": {
  "enabled": true,
  "element": {
    "name": "div",
    "attrs": {
      "class": "endnotes-section"
    }
  }
}

▸

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

Custom wrapper element

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

"endnotesWrapper": {
  "enabled": true,
  "element": {
    "name": "section",
    "attrs": {
      "class": "endnotes-section"
    }
  }
}

▸

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

Custom wrapper attributes

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

"endnotesWrapper": {
    "enabled": true,
    "element": {
      "name": "div",
      "attrs": {
        "data-section": "endnotes"
      }
    }
  }

▸

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

Disabling the wrapper element

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

Heading

Default heading element

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

"endnotesHeading": {
  "enabled": true,
  "element": {
    "name": "h2",
    "content": "Endnotes"
  }
}

▸

<h2>
  Endnotes
</h2>

Custom heading element

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

"endnotesHeading": {
  "enabled": true,
  "element": {
    "name": "div",
    "content": "Endnotes"
  }
}

▸

<div>
  Endnotes
</div>

Custom heading attributes

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

"endnotesHeading": {
  "enabled": true,
  "element": {
    "name": "h2",
    "content": "Endnotes",
    "attrs": {
      "class": "endnotes-heading",
      "data-foo": "bar"
    }
  }
}

▸

<h2 
  class="endnotes-heading" 
  data-foo="bar"
>
  Endnotes
</h2>

Custom heading content

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

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

▸

<h2>
  Notes
</h2>

Disabling the heading element

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

List

Default list element

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

"endnotesList": {
  "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 endnotesList.element.name property. In the example below a ol element will be created instead of the default ul element.

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

▸

<ol>
  ...
</ol>

Custom list attributes

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

"endnotesList": {
    "enabled": true,
    "element": {
      "name": "ul",
      "attrs": {
        "class": "endnotes-list"
    }
  }

▸

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

Disabling the list element

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

List item

Default list item element

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

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

▸

<li>
  Endnote text
</li>

Custom list item element

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

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

▸

<div>
  Endnote text
</div>

Custom list item attributes

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

"endnotesListItem": {
    "enabled": true,
    "element": {
      "name": "li",
      "attrs": {
        "class": "endnote-list-item"
    }
  }

▸

<li class="endnote-list-item">
  Endnote 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 endnotesListItem.enabled property to false.