@beoe/rehype-penrose

Rehype plugin to generate Penrose diagrams in place of code fences. Example:

Diagram

Use two fingers to pan and zoom

+ ↺ -

Markdown

```penrose style="euclidean.style" domain="euclidean.domain" width=800 height=800
Plane P
Point p, q, r, s
In(p, P)
In(q, P)
In(r, P)
In(s, P)
Let a := Segment(p, q)
Let b := Segment(p, r)
Point m := Midpoint(a)
In(m, P)
Angle theta := InteriorAngle(q, p, r)
Let t := Triangle(p, r, s)
Ray w := Bisector(theta)
Segment h := PerpendicularBisector(a, m)
AutoLabel p, q, r, s, m
Label P $E^2$
```

Installation

npm

npm i @beoe/rehype-penrose

pnpm

pnpm add @beoe/rehype-penrose

yarn

yarn add @beoe/rehype-penrose

Usage

import rehypeD2 from "@beoe/rehype-penrose";

const html = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeD2, {
    shared: "shared",
    /* options */
  })
  .use(rehypeStringify)
  .process(`markdown`);

Check out other options.

Configuration

You probaly want to use file strategy.

PenroseOptions

export type PenroseOptions = {
  /**
   * path to shared folder for `.domain` and `.style` files
   */
  shared: string;
  /**
   * Width of diagram
   */
  width?: number;
  /**
   * Height of diagram
   */
  height?: number;
  /**
   * Name (or path) for `.style` file
   */
  style?: string;
  /**
   * Name (or path) for `.domain` file
   */
  domain?: string;
  variation?: string;
  namespace?: string;
};

You can set it globally:

use(rehypePenrose, {
  width: 400,
  height: 400,
});

Or locally:

```penrose width=400 height=400
...
```