Introducing KaTeX

Many students are using Quotion. One of the most wanted features is KaTeX for math.

Today, we're excited to share that Quotion now supports KaTeX out of the box. 🔥

Preview

The note:

The post:

Tech details

We need KaTeX css to render expressions correctly, but it is a pretty big chunk, to reduce the perf impact on unrelated pages, I loaded the css conditionally with next/dynamic, which only loads this dumb component when KaTeX is needed.

import 'katex/dist/katex.min.css';
 
/**
 * Used to load katex conditionally
 */
export default function KaTeX() {
  return <></>;
}

const DynamicKatex = dynamic(() => import('./katex'));
 
export default function Post() {
  return (<div>
       {…otherJSX}
       {needKatex && <DynamicKatex />}
  </div>);
}

Write KaTeX in your Apple Notes, and share the Quotion post with your classmates seamlessly!