A world-class math input for the web
pulljosh.com
1---
2import Header from "../components/Header.astro";
3import "../global.css";
4---
5
6<!doctype html>
7<html>
8 <head>
9 <link rel="preconnect" href="https://fonts.googleapis.com" />
10 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11 <link
12 href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap"
13 rel="stylesheet"
14 />
15 <meta charset="utf-8" />
16 </head>
17 <body class="font-serif">
18 <Header />
19 <div class="border-b border-stone-300">
20 <div class="max-w-4xl mx-auto px-8 py-16">
21 <h1 class="font-semibold text-3xl text-stone-800">
22 World-Class Math Input for the Web
23 </h1>
24 <p class="text-stone-800 text-xl mt-2">
25 Effortlessly add math (and science) inputs to your web application.
26 Beautiful, accessible, and customizable beyond belief.
27 </p>
28 <div class="mt-8 text-center">
29 <!-- Quadratic Formula -->
30 <math
31 class="mx-auto border border-stone-500 px-4 py-2 rounded text-xl"
32 >
33 <mi>x</mi>
34 <mo>=</mo>
35 <mfrac>
36 <mrow>
37 <mo>−</mo>
38 <mi>b</mi>
39 <mo>±</mo>
40 <msqrt>
41 <msup>
42 <mi>b</mi>
43 <mn>2</mn>
44 </msup>
45 <mo>−</mo>
46 <mn>4</mn>
47 <mi>a</mi>
48 <mi>c</mi>
49 </msqrt>
50 </mrow>
51 <mrow>
52 <mn>2</mn>
53 <mi>a</mi>
54 </mrow>
55 </mfrac>
56 </math>
57 </div>
58 </div>
59 </div>
60 <ul>
61 <li>
62 <strong>Parsing</strong> Caret has built-in support for parsing user input
63 into an easily-consumable tree. This makes it easy to analyze and perform
64 computation on user input.
65 </li>
66 <li>
67 <strong>Syntax Highlighting</strong> Define your own custom syntax highlighting.
68 Create custom rules that use the parsed tree to customize rendering. [Color-coded
69 function inputs demo]
70 </li>
71 <li>
72 <strong>Live Multiplayer</strong> Use Caret's built-in CRDT to effortlessly
73 support live multiplayer editing, with or without a central server.
74 </li>
75 <br />
76 <li>
77 <strong>Any Frontend Library</strong> Caret can be integrated with any frontend
78 library or used with plain JavaScript.
79 </li>
80 <li>
81 <strong>Custom Rendering</strong> Provide your own components to customize
82 rendering of all token types.
83 </li>
84 <li>
85 <strong>World-Class Accessibility</strong> Caret has native support for keyboard
86 navigation, screen reader output, speech input, braille displays, and more.
87 </li>
88 <br />
89 <li>
90 <strong>LaTeX Input/Output</strong> Caret can instantly input and output LaTeX
91 for interoperability with other tools.
92 </li>
93 <li>
94 <strong>MathQuill Compatibility</strong> Coming from MathQuill? The MathQuill
95 compatibility layer makes Caret a drop-in replacement.
96 </li>
97 <li>
98 <p>
99 <strong>Customize Everything</strong> Absolutely everything in Caret is
100 modular and customizable.
101 </p>
102 <ul>
103 <li>
104 Define your own token types [Example with a custom "emoji" token]
105 </li>
106 <li>Customize parsing behavior []</li>
107 </ul>
108 </li>
109 </ul>
110 </body>
111</html>
112
113<style>
114 body {
115 background: var(--color-stone-100);
116 }
117</style>