JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.css">

JavaScript

import { html, render, useMemo } from "https://unpkg.com/htm/preact/standalone.module.js";
import katex from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.mjs';

function Question1() {
	return html`
  	<div>
    	<p>
      	Which of the following is a solution to the equation
      	<${Latex}>${String.raw`\sqrt{14 - x} + 2 = x`}<//>?
      </p>
      
      <ol type="I">
      	<li>-2</li>
        <li>1</li>
        <li>5</li>
      </ol>
      
      <ol type="A">
      	<li>I only</li>
        <li>II only</li>
        <li>III only</li>
        <li>I and III</li>
      </ol>
    </div>
  `;
}

function App() {
	return html`
  	<div>
    	<p>If <${Latex}>3(2x-3)=33<//>, what is the value of <${Latex}>x<//>?</p>
      
      <ol type="A">
      	<li><${Latex}>4<//></li>
        <li><${Latex}>6<//></li>
        <li><${Latex}>7<//></li>
        <li><${Latex}>${String.raw`\frac{33}{2}`}<//></li>
      </ol>
    </div>
  `;
}

function Latex({ children }) {
	const str = useMemo(() => katex.renderToString(children, {
    throwOnError: false
  }), [children]);
  
  return html`<span dangerouslySetInnerHTML=${{ __html: str }} />`;
}

render(html`<${App} />`, document.body);