#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 image showcases a Markdown document titled 'Markdown' with a section on 'Katex.' It displays a mathematical equation for lift, illustrating how lift can be determined by the lift coefficient. The overall mood is informative and technical, with a clean, minimalist design.

The post:

The image showcases a blog post titled 'markdown' on a website. The post, written by Qing, discusses the topic of Katex and includes a mathematical equation. The overall mood is informative and clean, with a focus on presenting technical content in a readable format.

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.

katex.tsx
import 'katex/dist/katex.min.css';
 
/**
 * Used to load katex conditionally
 */
export default function KaTeX() {
  return <></>;
}
post.tsx
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.