Tufte-Markdown

This project is still in a very early stage and has not been tested extensively with a wide-range of documents use at your own risk

This project aims to convert markdown to HTML (or React) in a way that it can be used with tufte-css - a set of stylesheets that aim to emulate the Style of the Handouts of Edward Tufte.

In the end it looks like this: https://edwardtufte.github.io/tufte-css/

The markdown-syntax is taken from the great tufte-pandoc-css-project, but not yet fully implemented. This project will aim to emulate the syntax there as much as possible.

Markdown-Parsing and -Conversion is done usingremark

Installation

$ npm install @tufte-markdown/parser

Usage

import configureParser from '@tufte-markdown/parser'

const options = {
  react: false,
}

const parse = configureParser(options)
const result = parse('## Heading **strong** *emphasis*')

console.dir(result)

// Output:
// <section><h2 id="heading-strong-emphasis">Heading <strong>strong</strong> <em>emphasis</em></h2></section>\n'

🖐 Note: The parser currently only outputs document fragment to make it look right you will have to wrap it in an article-tag

Options

options.react (Default: false) - Output a react-syntax-tree instead of HTML using remark-react

Syntax

You can get an overview of the possible syntax in the base file for the full example

Limitations/Differences to tufte-pandoc-css

• Currently cannot parse markdown in the footer of a blockquote
• Does not wrap put headings below h2 in their own sections, which is closer to the original tufte-css
• tufte-pandoc-css uses ^[{-} Text] for inline-sidenotes which would need custom parsing in remark. This project uses [^{-} Text] which seems to be more inline with how the other side-/marginnotes are defined

Example:

tufte-pandoc-css

<figure>
^[{-} From Edward Tufte, *Visual Display of Quantitative Information*, page 92.]
![Exports and Imports to and from Denmark & Norway from 1700 to 1780](img/exports-imports.png)
</figure>

tufte-markdown

<figure>
[^{-} From Edward Tufte, *Visual Display of Quantitative Information*, page 92.]
![Exports and Imports to and from Denmark & Norway from 1700 to 1780](img/exports-imports.png)
</figure>

Motivation

To provide an alternative to tufte-pandoc-css within the node-ecosystem to make it easier to integrate with libraries like React