HTML Plugins for Eleventy

Eleventy plugins for adding tables of contents, syntax highlighting, and external link attributes to HTML templates.

Contents

• Limitations of HTML Templates
• The Plugins
• Downloads

Limitations of HTML Templates

Eleventy allows for the step-by-step conversion of existing websites consisting of static HTML files to Markdown, Liquid, and Eleventy. However, the tools it provides for pages (templates) in plain HTML format are rather limited. There are many plugins for markdown-it that can be used to enhance pages based on Markdown templates with tables of contents, attributes, and other features missing from HTML templates.

The website H. Wagner’s VB.Any consisted of hand-edited, complete, static HTML documents. These pages made heavy use of semantic HTML markup—such as abbr, b, and cite—which would have to be retained even when converting the pages to Markdown. Therefore, the decision was made to keep these pages in HTML format and use them as Eleventy templates.

The HTML head section, navigation, and footer were removed from the individual HTML files using a Node.js script with regular expressions. During this conversion, page metadata (date of creation, last modification, title, description, etc.) were extracted and converted to Eleventy front matter in YAML format. The resulting partial HTML files, which mainly consisted of the content inside the main element, were processed by Eleventy and converted to output HTML pages using the project’s Liquid layout:

---
title: Sample Page
description: This is a sample page.
---
<h1>Sample Page</h1>
<p>Sample paragraph.</p>

Source code listings enclosed in code elements were augmented by a language-vb (for Classic Visual Basic) HTML class, but syntax highlighting did not work out of the box. Also, automatic generation of tables of contents based on the page’s heading elements would have been desirable.

The Plugins

These shortcomings were mitigated by writing a set of Eleventy plugins based on the parse5 HTML manipulation library:

HTML Container Plugin

Wraps the contents of HTML containers—such as <div class="remark">—into div elements to enable advanced CSS styling using Flexbox or Grid.

HTML External Links Plugin

Adds target="_blank" and rel="noopener noreferrer" attributes to hyperlinks that reference external websites.

HTML Syntaxhighlight Plugin

Provides syntax highlighting for HTML source code listings based on the Eleventy Syntax Highlighting Plugin. This plugin enables highlighting for source code in HTML-based templates without using Eleventy shortcodes or filters.

HTML TOC Plugin

Creates a hierarchical table of contents based on the headings present in the HTML document and adds it to the document. The plugin retains existing IDs defined on headings and adds slug-based IDs to headings without an ID.

Downloads