main.md

Hello

::::{figure}

% Figure contents taken from https://github.com/walmes/Tikz :::{tikz} domain=-0.25:9, scale=0.7, >=latex

% \draw[very thin,color=gray!30] (-1.1,-1.1) grid (12.1,7.1); \draw[->] (-0.2,0) -- (9.2,0) node[right] {$x$}; \draw[->] (0,-0.2) -- (0,5.5) node[above] {$Y$};

\begin{scope}[line width=1pt] \coordinate (a1) at (0,0); \coordinate (a2) at (4,3); \coordinate (a3) at (9,5); \draw (a1) ..controls (2,1) and (1,5).. (a2); \draw (a2) ..controls (7,1) and (7,3).. (a3); \node[right] at (a3) {$\eta(x)$}; \end{scope}

\begin{scope}[ color=gray, fill opacity=0.3, fill=gray, smooth, domain=-1:1]

\def\x{1.5}; \def\y{2.4};
\filldraw[xshift=\x cm, yshift=\y cm]
  (0,-0.8) -| (0.8,0) |- (0,0.9);
\draw (\x,\y) -- ++(0.8,0);
\draw[dashed] (\x,0) -- ++(0,5.5);

\def\x{3.75}; \def\y{3.15};
\filldraw[xshift=\x cm, yshift=\y cm]
  (0,-1) -- (1,0) -- (0,1);
\draw (\x,\y) -- ++(1,0);
\draw[dashed] (\x,0) -- ++(0,5.5);

\def\x{6}; \def\y{2.7};
\filldraw[xshift=\x cm, yshift=\y cm]
  plot[id=x, rotate=-90]
  function{0.55*(1+x)**3*(1-x)**0.9};
\draw (\x,2.17) -- ++(1,0);
\draw[dashed] (\x,0) -- ++(0,5.3);

\def\x{8}; \def\y{3.85};
\filldraw[xshift=\x cm, yshift=\y cm]
  plot[id=x, rotate=-90, domain=-1.2:1.2]
  function{exp(-(x)**2/0.29)};
\draw (\x,\y) -- ++(1,0);
\draw[dashed] (\x,0) -- ++(0,5.5);

\end{scope}

\coordinate (a) at (8.25,3.5); \node (b) at (10,2.8) {$[Y|x]$}; \draw (a) edge[out=0, in=180,->] (b); :::

I'm a figure ::::

myst.yml

# See docs at: https://mystmd.org/guide/frontmatter
version: 1
project:
  id: 5a2418c2-e8a7-4676-9d1f-1a4d366894f3
  plugins:
    - tikz.mjs
  # title:
  # description:
  # keywords: []
  # authors: []
  # github:
  # To autogenerate a Table of Contents, run "myst init --write-toc"
site:
  template: book-theme
  # options:
  #   favicon: favicon.ico
  #   logo: site_logo.png

tikz.mjs

import { mkdtempSync, writeFileSync, readFileSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { execSync } from "node:child_process";

const TEMPLATE_SOURCE = `
\\documentclass{standalone}
\\usepackage{xcolor}
\\usepackage{pgfplots}
\\usepackage{tikz}
\\begin{document}
\\nopagecolor
%LIBRARY
\\begin{tikzpicture}%ARG
%BODY
\\end{tikzpicture}
\\end{document}
`;

function tikzToDataURL(body, library, arg) {
  const mainSource = TEMPLATE_SOURCE.replace("%BODY", body)
    .replace("%ARG", arg ? `[${arg}]` : "")
    .replace("%LIBRARY", library ? `\\usetikzlibrary{${library}}` : "");
  const tmpDir = mkdtempSync(join(tmpdir(), "tikz-"));
  console.debug(`Writing TikZ temporaries to ${tmpDir}`);
  writeFileSync(join(tmpDir, "main.tex"), mainSource);
  execSync("pdflatex main.tex", { cwd: tmpDir });
  execSync("pdf2svg main.pdf main.svg", { cwd: tmpDir });
  const data = readFileSync(join(tmpDir, "main.svg"), { encoding: "base64" });
  return `data:image/svg+xml;base64,${data}`;
}

const tikzDirective = {
  name: "tikz",
  doc: "An example directive that renders TikZ figures.",
  body: { type: String, doc: "TikZ source" },
  arg: { type: String, doc: "TikZ picture arguments", required: false },
  options: {
    library: {
      type: String,
      doc: "Additional TikZ libraries to use",
    },
  },
  run(data) {
    const body = data.body ?? "";
    const url = tikzToDataURL(body, data.options?.library, data.arg);

    const img = { type: "image", url };
    return [img];
  },
};

const plugin = { name: "TikZ", directives: [tikzDirective] };

export default plugin;