Skip to content

Configuration

All Rehype diagram plugins support (at least) following configurations:

  • strategy (optional). Default inline
  • darkScheme (optional). Default undefined
  • cache (optional) - Map-like storage to speed up consequent renders of page. You can use standard JS Map, but probably it is better to use @beoe/cache.
  • class (optional) - allows to setup additional classes for diagrams. For example, .not-content for inline diagrams if you use tailwindcss-typography
  • svgo (optional) - options for SVGO. Use false to disable optimization with SVGO

All configurations can be set either globally or locally (via fence-code meta). Global configurations applies to all diagrams. Local configurations applies only to one diagram. Local configurations always override global, with exception for class option (it applies all provided classes).

Also you won’t be able to set cache and svgo via local configurations, except disabling them with false value.

Global configuration

For example,

import { getCache } from "@beoe/cache";
const cache = await getCache();
use(rehypeDiagram, {
strategy: "file",
darkScheme: "class",
class: "something",
cache,
});

Local configuration

```some-diagram strategy=inline darkScheme=false class=interactive
...
```