hTex /eɪtʃtɛx/

A collection of markdown-it and eleventy plugins for hassle-free academic writing. Largely compatible with the Pandoc Markdown syntax. All plugins are enabled by default but can be disabled individiually, by passing in false for the corresponding option. They can also be configured by passing a settings object.

Installation

npm i htex

As 11ty plugin

import htex from 'htex/eleventy';

eleventyConfig.use(htex, { /* options */ });

Just the markdown-it plugins

If you don’t use 11ty, you can still use the markdown-it plugins. There are two ways to do that: if you don’t already have a markdown instance, you can simply get one back from hTex:

import htex from "htex/markdown-it";

let md = htex({ /* options */ });

If you already have a markdown-it instance, you can add the plugins to it:

import htex from "htex/markdown-it";
htex(md, { /* options */ });

or:

import htex from "htex/markdown-it";
htex({
	instance: md,
	/* options */
});

Plugins

Eleventy

Plugin	Option	Description
eleventy-plugin-citations	citations	Citations and bibliographies.
eleventy-plugin-outline	outline	Section & figure numbers, tables of content, heading anchors, and many more.
Todos	todos	Picks up todos from HTML comments, formats them nicely, and summarizes them in a separate file, by priority or by file.
Image dimensions	imageDimensions	Adds CSS custom properties for images' intrinsic width and height.

Markdown plugins

You can just add the Markdown plugins by using the htex/markdown export.

Plugin	Option	Description
markdown-it-attrs	attrs	Add classes, IDs, and attributes to elements.
markdown-it-prism	codeHighlight	Syntax highlighting (using PrismJS)
markdown-it-mathjax3	math	Math rendering (using MathJax 3).
markdown-it-deflist	definitionLists	Definition lists.
markdown-it-table-captions	tableCaptions	Table captions.
markdown-it-footnote	footnote	Footnotes. Comes with an optional footnotes.css for styling footnotes with a separator line and proper spacing.
markdown-it-bracketed-spans	spans	Concise bracketed spans.
markdown-it-sup	sup	Superscripts using ^.
markdown-it-sub	sub	Subscripts using ~.

Styling

Footnotes

To style footnotes, you can import the included CSS file:

@import "htex/markdown-it/footnotes.css";

This provides a clean layout for footnotes with:

• Superscript footnote references
• A separator line before the footnotes section
• Proper spacing and alignment
• Customizable separator length and thickness via CSS custom properties:
  • --footnotes-separator-length (default: 15ch)
  • --footnotes-separator-thickness (default: 1px)