Tufte Markdown Demonstration

This is a minimalist demonstration of the markdown-it-tufte plugin.

Simply write in the text box below, then click away, and the text will be rendered.

# Markdown-It Tufte Demonstration

With help from markdown-it-attrs {.subtitle}

^^Emma Woodhouse^^, handsome, clever, and rich, with a comfortable home and happy disposition, seemed to unite some of the best blessings of existence.

Each "new thought" and second-level heading automatically gets a section break and an ID for URL fragment linking.

## Sidenotes and Marginalia

Here's where things really get exciting. Markdown footnotes[^foots] are a convenient way to move digressions and asides out of the primary flow of a document, but shoving them to the bottom of a long page is no good, either.

[^foots]: [Footnotes](https://www.markdownguide.org/extended-syntax#footnotes) weren't actually part of the original markdown spec, but they've become a popular bolt-on.

## Figures and Captions

An image on its own line gets special rendering in a `figure` tag.

![tree in a field](tree.jpg "I send my friends pictures of the most amazing trees")

Notice how the `figcaption` is populated from the image title. Also note the different positionings of the caption based on the viewport size.

A full-width image can be achieved with the `.fullwidth` class on the figure tag, easily added with the markdown-it-attrs plugin:

![tree in a field](tree.jpg "Are you obsessed with all my forest expertise?"){.fullwidth}

Note that the markdown-it-attrs plugin is also included in this demo. It isn't required for the Tufte plugin to work, but it aids in adding some CSS classes to certain elements.

Aside from Tufte CSS, the only additional stylesheet used to achieve the above demo can be found here.