Amy Render

We use a bare-bones approach to our render package, its a bit of a byo. You supply your own renderers into AmyRender

Supported Renderers:

$3

- Katex (We recommend the react-katex npm package, but you could easily roll your own using the katex package)
- Most LaTeX renderers will possibley work fine, we just haven't tested them, there might be edge cases we haven't found yet.

$3

- Plotly.js (This will most likely be the only supported one for a while, as our plots utilise many of their features)

$3

- Marked
- Most other Markdown renderers will work fine, We dont use any specialised markdown in our syntax.

Example config:

It is suggested to copy this config to a new file and import from that into your system.

This so you have the flexability to use your own renderers, and so the AmyRender package isnt huge.

``typescript
// we need react, because this is a react package...
import React from "react";
import { AmyRender, AmyRenderConfig } from "@amy-app/react-components";
import "katex/dist/katex.min.css";

// these packages are optional (only these have been tested, but this allows us to support more in the future)
import marked from "marked";
import { BlockMath, InlineMath } from "react-katex";
import Plot from "react-plotly.js";

// set up the config, this lets the renderer know what to use to render the different AmySyntax sections
const renderConfig: AmyRenderConfig = {
latex: {
inline: (key: string, text: string) => ,
block: (key: string, text: string) => ,
},
plot: (name: string, data: any, layout: any) => ,
markdown: marked,
};

// default renderers
export function InstructionRender({ text, color }: { text: string; color?: "black" | "white" }) {
return ;
}

export function ExpressionRender({ text, color }: { text: string; color?: "black" | "white" }) {
return (

);
}
``