devpage 0.2.2

Live documents from a repository: sites, docs and slides from Markdown, and UI designs drawn from code — with comments, link checking and PDF
1
2
3
4
5
6
7
8
9
10
11
12

// Markdown source, highlighted, beside what it renders to.
export default function Example({ title, source, sourceHtml, children }: { title?: string; source: string; sourceHtml?: string; children?: any }) {
  return (
    <figure className="example">
      {title ? <figcaption>{title}</figcaption> : null}
      <pre className="example-source">
        {sourceHtml !== undefined ? <code dangerouslySetInnerHTML={{ __html: sourceHtml }} /> : <code>{source}</code>}
      </pre>
      <div className="example-result">{children}</div>
    </figure>
  );
}