Package Exports

@tufte-markdown/parser

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@tufte-markdown/parser) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

@tufte-markdown/parser