Introducing KaTeX

#ProductUpdate
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!

Read the doc to learn how to enable it.