diff --git a/app/editor/menus/block.tsx b/app/editor/menus/block.tsx
index 291526aa1..b4d070180 100644
--- a/app/editor/menus/block.tsx
+++ b/app/editor/menus/block.tsx
@@ -18,6 +18,7 @@ import {
   AttachmentIcon,
   ClockIcon,
   CalendarIcon,
+  MathIcon,
 } from "outline-icons";
 import * as React from "react";
 import styled from "styled-components";
@@ -124,6 +125,12 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
       shortcut: "^ ⇧ \\",
       keywords: "script",
     },
+    {
+      name: "math_block",
+      title: dictionary.mathBlock,
+      icon: <MathIcon />,
+      keywords: "math katex latex",
+    },
     {
       name: "hr",
       title: dictionary.hr,
diff --git a/app/hooks/useDictionary.ts b/app/hooks/useDictionary.ts
index 670017490..c970ff810 100644
--- a/app/hooks/useDictionary.ts
+++ b/app/hooks/useDictionary.ts
@@ -69,6 +69,8 @@ export default function useDictionary() {
       strong: t("Bold"),
       subheading: t("Subheading"),
       table: t("Table"),
+      mathInline: t("Math inline (LaTeX)"),
+      mathBlock: t("Math block (LaTeX)"),
       tip: t("Tip"),
       tipNotice: t("Tip notice"),
       showDiagram: t("Show diagram"),
diff --git a/app/scenes/KeyboardShortcuts.tsx b/app/scenes/KeyboardShortcuts.tsx
index 02273e975..c7cbcad31 100644
--- a/app/scenes/KeyboardShortcuts.tsx
+++ b/app/scenes/KeyboardShortcuts.tsx
@@ -339,6 +339,14 @@ function KeyboardShortcuts() {
             shortcut: <Key>{"```"}</Key>,
             label: t("Code block"),
           },
+          {
+            shortcut: (
+              <>
+                <Key>$$</Key> <Key>Space</Key>
+              </>
+            ),
+            label: t("LaTeX block"),
+          },
           {
             shortcut: <Key>{":::"}</Key>,
             label: t("Info notice"),
@@ -359,6 +367,10 @@ function KeyboardShortcuts() {
             shortcut: "`code`",
             label: t("Inline code"),
           },
+          {
+            shortcut: "$latex$",
+            label: t("Inline LaTeX"),
+          },
           {
             shortcut: "==highlight==",
             label: t("Highlight"),
diff --git a/package.json b/package.json
index a36b03309..62af1a0dd 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "@babel/plugin-transform-regenerator": "^7.10.4",
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
+    "@benrbray/prosemirror-math": "^0.2.2",
     "@bull-board/api": "^4.2.2",
     "@bull-board/koa": "^4.6.2",
     "@dnd-kit/core": "^6.0.5",
@@ -113,6 +114,7 @@
     "json-loader": "0.5.7",
     "jsonwebtoken": "^8.5.0",
     "jszip": "^3.10.1",
+    "katex": "^0.16.3",
     "kbar": "0.1.0-beta.28",
     "koa": "^2.13.4",
     "koa-body": "^4.2.0",
@@ -246,6 +248,7 @@
     "@types/ioredis": "^4.28.1",
     "@types/jest": "^28.1.6",
     "@types/jsonwebtoken": "^8.5.8",
+    "@types/katex": "^0.14.0",
     "@types/koa": "^2.13.4",
     "@types/koa-compress": "^4.0.3",
     "@types/koa-helmet": "^6.0.4",
@@ -309,6 +312,7 @@
     "babel-plugin-transform-typescript-metadata": "^0.3.2",
     "babel-plugin-tsconfig-paths-module-resolver": "^1.0.3",
     "concurrently": "^7.4.0",
+    "css-loader": "5.2.6",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "^7.32.0",
@@ -335,6 +339,7 @@
     "prettier": "^2.0.5",
     "react-refresh": "^0.14.0",
     "rimraf": "^2.5.4",
+    "style-loader": "2.0.0",
     "terser-webpack-plugin": "^4.1.0",
     "typescript": "^4.7.4",
     "url-loader": "^4.1.1",
diff --git a/server/models/helpers/DocumentHelper.tsx b/server/models/helpers/DocumentHelper.tsx
index 3c3eda484..74c3dab06 100644
--- a/server/models/helpers/DocumentHelper.tsx
+++ b/server/models/helpers/DocumentHelper.tsx
@@ -4,7 +4,6 @@ import {
 } from "@getoutline/y-prosemirror";
 import { JSDOM } from "jsdom";
 import { escapeRegExp } from "lodash";
-import diff from "node-htmldiff";
 import { Node, DOMSerializer } from "prosemirror-model";
 import * as React from "react";
 import { renderToString } from "react-dom/server";
@@ -19,6 +18,7 @@ import { parser, schema } from "@server/editor";
 import Logger from "@server/logging/Logger";
 import Document from "@server/models/Document";
 import type Revision from "@server/models/Revision";
+import diff from "@server/utils/diff";
 import parseAttachmentIds from "@server/utils/parseAttachmentIds";
 import { getSignedUrl } from "@server/utils/s3";
 import Attachment from "../Attachment";
diff --git a/server/utils/diff.ts b/server/utils/diff.ts
new file mode 100644
index 000000000..e19c940d0
--- /dev/null
+++ b/server/utils/diff.ts
@@ -0,0 +1,1118 @@
+// Forked from https://github.com/inkling/htmldiff.js/blob/master/js/htmldiff.js
+
+// The MIT License (MIT)
+
+// Copyright (c) 2012 The Network Inc. and contributors
+// Copyright (c) 2022 idesis GmbH, Max-Keith-Straße 66 (E 11), D-45136 Essen, https://www.idesis.de
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy of
+// this software and associated documentation files (the "Software"), to deal in
+// the Software without restriction, including without limitation the rights to
+// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+// of the Software, and to permit persons to whom the Software is furnished to do
+// so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+/**
+ * htmldiff.js is a library that compares HTML content. It creates a diff between two
+ * HTML documents by combining the two documents and wrapping the differences with
+ * <ins> and <del> tags. Here is a high-level overview of how the diff works.
+ *
+ * 1. Tokenize the before and after HTML with htmlToTokens.
+ * 2. Generate a list of operations that convert the before list of tokens to the after
+ *    list of tokens with calculateOperations, which does the following:
+ *      a. Find all the matching blocks of tokens between the before and after lists of
+ *         tokens with findMatchingBlocks. This is done by finding the single longest
+ *         matching block with findMatch, then iteratively finding the next longest
+ *         matching blocks that precede and follow the longest matching block.
+ *      b. Determine insertions, deletions, and replacements from the matching blocks.
+ *         This is done in calculateOperations.
+ * 3. Render the list of operations by wrapping tokens with <ins> and <del> tags where
+ *    appropriate with renderOperations.
+ *
+ * Example usage:
+ *
+ *   var htmldiff = require('htmldiff.js');
+ *
+ *   htmldiff('<p>this is some text</p>', '<p>this is some more text</p>')
+ *   == '<p>this is some <ins>more </ins>text</p>'
+ *
+ *   htmldiff('<p>this is some text</p>', '<p>this is some more text</p>', 'diff-class')
+ *   == '<p>this is some <ins class="diff-class">more </ins>text</p>'
+ */
+
+"use strict";
+
+type Token = {
+  string: string;
+  key: string;
+};
+
+type Segment = {
+  beforeTokens: Array<Token>;
+  afterTokens: Array<Token>;
+  beforeIndex: number;
+  afterIndex: number;
+
+  beforeMap: object;
+  afterMap: object;
+};
+
+type MatchT = {
+  segment: Segment;
+  length: number;
+
+  startInBefore: number;
+  endInBefore: number;
+  startInAfter: number;
+  endInAfter: number;
+
+  segmentStartInBefore: number;
+  segmentStartInAfter: number;
+  segmentEndInBefore: number;
+  segmentEndInAfter: number;
+};
+
+type OperationType = "insert" | "delete" | "replace" | "equal" | "none";
+
+type Operation = {
+  action: OperationType;
+  startInBefore: number;
+  endInBefore: number | null;
+  startInAfter: number | null;
+  endInAfter: number | null;
+};
+
+function isEndOfTag(char: string) {
+  return char === ">";
+}
+
+function isStartOfTag(char: string) {
+  return char === "<";
+}
+
+function isWhitespace(char: string) {
+  return /^\s+$/.test(char);
+}
+
+/**
+ * Determines if the given token is a tag.
+ *
+ * @param {string} token The token in question.
+ *
+ * @return {boolean|string} False if the token is not a tag, or the tag name otherwise.
+ */
+function isTag(token: string): boolean | string {
+  const match = token.match(/^\s*<([^!>][^>]*)>\s*$/);
+  return !!match && match[1].trim().split(" ")[0];
+}
+
+function isntTag(token: string) {
+  return !isTag(token);
+}
+
+function isStartofHTMLComment(word: string) {
+  return /^<!--/.test(word);
+}
+
+function isEndOfHTMLComment(word: string) {
+  return /--\>$/.test(word);
+}
+
+/**
+ * Checks if the current word is the beginning of an atomic tag. An atomic tag is one whose
+ * child nodes should not be compared - the entire tag should be treated as one token. This
+ * is useful for tags where it does not make sense to insert <ins> and <del> tags.
+ *
+ * @param {string} word The characters of the current token read so far.
+ *
+ * @return {string|null} The name of the atomic tag if the word will be an atomic tag,
+ *    null otherwise
+ */
+function isStartOfAtomicTag(word: string): string | null {
+  // Note: "math" was removed from this list on Outline fork to support math-display, math-inline nodes
+  const result = /^<(iframe|object|svg|script)/.exec(word);
+  return result && result[1];
+}
+
+/**
+ * Checks if the current word is the end of an atomic tag (i.e. it has all the characters,
+ * except for the end bracket of the closing tag, such as '<iframe></iframe').
+ *
+ * @param {string} word The characters of the current token read so far.
+ * @param {string} tag The ending tag to look for.
+ *
+ * @return {boolean} True if the word is now a complete token (including the end tag),
+ *    false otherwise.
+ */
+function isEndOfAtomicTag(word: string, tag: string): boolean {
+  return word.substring(word.length - tag.length - 2) === "</" + tag;
+}
+
+/**
+ * Checks if a tag is a void tag.
+ *
+ * @param {string} token The token to check.
+ *
+ * @return {boolean} True if the token is a void tag, false otherwise.
+ */
+function isVoidTag(token: string): boolean {
+  return /^\s*<[^>]+\/>\s*$/.test(token);
+}
+
+/**
+ * Checks if a token can be wrapped inside a tag.
+ *
+ * @param {string} token The token to check.
+ *
+ * @return {boolean} True if the token can be wrapped inside a tag, false otherwise.
+ */
+function isWrappable(token: string): boolean {
+  return isntTag(token) || !!isStartOfAtomicTag(token) || isVoidTag(token);
+}
+
+/**
+ * Creates a token that holds a string and key representation. The key is used for diffing
+ * comparisons and the string is used to recompose the document after the diff is complete.
+ *
+ * @param {string} currentWord The section of the document to create a token for.
+ *
+ * @return {Token} A token object with a string and key property.
+ */
+function createToken(currentWord: string): Token {
+  return {
+    string: currentWord,
+    key: getKeyForToken(currentWord),
+  };
+}
+
+/**
+ * A Match stores the information of a matching block. A matching block is a list of
+ * consecutive tokens that appear in both the before and after lists of tokens.
+ *
+ * @param {number} startInBefore The index of the first token in the list of before tokens.
+ * @param {number} startInAfter The index of the first token in the list of after tokens.
+ * @param {number} length The number of consecutive matching tokens in this block.
+ * @param {Segment} segment The segment where the match was found.
+ */
+function Match(
+  startInBefore: number,
+  startInAfter: number,
+  length: number,
+  segment: Segment
+) {
+  this.segment = segment;
+  this.length = length;
+
+  this.startInBefore = startInBefore + segment.beforeIndex;
+  this.startInAfter = startInAfter + segment.afterIndex;
+  this.endInBefore = this.startInBefore + this.length - 1;
+  this.endInAfter = this.startInAfter + this.length - 1;
+
+  this.segmentStartInBefore = startInBefore;
+  this.segmentStartInAfter = startInAfter;
+  this.segmentEndInBefore = this.segmentStartInBefore + this.length - 1;
+  this.segmentEndInAfter = this.segmentStartInAfter + this.length - 1;
+}
+
+/**
+ * Tokenizes a string of HTML.
+ *
+ * @param {string} html The string to tokenize.
+ *
+ * @return {Array} The list of tokens.
+ */
+function htmlToTokens(html: string): Array<Token> {
+  let mode = "char";
+  let currentWord = "";
+  let currentAtomicTag = "";
+  const words = [];
+  for (let i = 0; i < html.length; i++) {
+    const char = html[i];
+    switch (mode) {
+      case "tag": {
+        const atomicTag = isStartOfAtomicTag(currentWord);
+        if (atomicTag) {
+          mode = "atomic_tag";
+          currentAtomicTag = atomicTag;
+          currentWord += char;
+        } else if (isStartofHTMLComment(currentWord)) {
+          mode = "html_comment";
+          currentWord += char;
+        } else if (isEndOfTag(char)) {
+          currentWord += ">";
+          words.push(createToken(currentWord));
+          currentWord = "";
+          if (isWhitespace(char)) {
+            mode = "whitespace";
+          } else {
+            mode = "char";
+          }
+        } else {
+          currentWord += char;
+        }
+        break;
+      }
+      case "atomic_tag":
+        if (
+          isEndOfTag(char) &&
+          isEndOfAtomicTag(currentWord, currentAtomicTag)
+        ) {
+          currentWord += ">";
+          words.push(createToken(currentWord));
+          currentWord = "";
+          currentAtomicTag = "";
+          mode = "char";
+        } else {
+          currentWord += char;
+        }
+        break;
+      case "html_comment":
+        currentWord += char;
+        if (isEndOfHTMLComment(currentWord)) {
+          currentWord = "";
+          mode = "char";
+        }
+        break;
+      case "char":
+        if (isStartOfTag(char)) {
+          if (currentWord) {
+            words.push(createToken(currentWord));
+          }
+          currentWord = "<";
+          mode = "tag";
+        } else if (/\s/.test(char)) {
+          if (currentWord) {
+            words.push(createToken(currentWord));
+          }
+          currentWord = char;
+          mode = "whitespace";
+        } else if (/[\w\d\#@]/.test(char)) {
+          currentWord += char;
+        } else if (/&/.test(char)) {
+          if (currentWord) {
+            words.push(createToken(currentWord));
+          }
+          currentWord = char;
+        } else {
+          currentWord += char;
+          words.push(createToken(currentWord));
+          currentWord = "";
+        }
+        break;
+      case "whitespace":
+        if (isStartOfTag(char)) {
+          if (currentWord) {
+            words.push(createToken(currentWord));
+          }
+          currentWord = "<";
+          mode = "tag";
+        } else if (isWhitespace(char)) {
+          currentWord += char;
+        } else {
+          if (currentWord) {
+            words.push(createToken(currentWord));
+          }
+          currentWord = char;
+          mode = "char";
+        }
+        break;
+      default:
+        throw new Error("Unknown mode " + mode);
+    }
+  }
+  if (currentWord) {
+    words.push(createToken(currentWord));
+  }
+
+  return words;
+}
+
+/**
+ * Creates a key that should be used to match tokens. This is useful, for example, if we want
+ * to consider two open tag tokens as equal, even if they don't have the same attributes. We
+ * use a key instead of overwriting the token because we may want to render the original string
+ * without losing the attributes.
+ *
+ * @param {string} token The token to create the key for.
+ *
+ * @return {string} The identifying key that should be used to match before and after tokens.
+ */
+function getKeyForToken(token: string): string {
+  const tagName = /<([^\s>]+)[\s>]/.exec(token);
+  if (tagName) {
+    return "<" + tagName[1].toLowerCase() + ">";
+  }
+  return token && token.replace(/(\s+|&nbsp;|&#160;)/g, " ");
+}
+
+/**
+ * Creates a map from token key to an array of indices of locations of the matching token in
+ * the list of all tokens.
+ *
+ * @param {Array.<Token>} tokens The list of tokens to be mapped.
+ *
+ * @return {Object} A mapping that can be used to search for tokens.
+ */
+function createMap(tokens: Array<Token>): object {
+  return tokens.reduce(function (map, token, index) {
+    if (map[token.key]) {
+      map[token.key].push(index);
+    } else {
+      map[token.key] = [index];
+    }
+    return map;
+  }, Object.create(null));
+}
+
+/**
+ * Compares two match objects to determine if the second match object comes before or after the
+ * first match object. Returns -1 if the m2 should come before m1. Returns 1 if m1 should come
+ * before m2. If the two matches criss-cross each other, a null is returned.
+ *
+ * @param {MatchT} m1 The first match object to compare.
+ * @param {MatchT} m2 The second match object to compare.
+ *
+ * @return {number} Returns -1 if the m2 should come before m1. Returns 1 if m1 should come
+ *    before m2. If the two matches criss-cross each other, 0 is returned.
+ */
+function compareMatches(m1: MatchT, m2: MatchT): number {
+  if (m2.endInBefore < m1.startInBefore && m2.endInAfter < m1.startInAfter) {
+    return -1;
+  } else if (
+    m2.startInBefore > m1.endInBefore &&
+    m2.startInAfter > m1.endInAfter
+  ) {
+    return 1;
+  } else {
+    return 0;
+  }
+}
+
+/**
+ * A constructor for a binary search tree used to keep match objects in the proper order as
+ * they're found.
+ *
+ * @constructor
+ */
+function MatchBinarySearchTree() {
+  this._root = null;
+}
+
+MatchBinarySearchTree.prototype = {
+  /**
+   * Adds matches to the binary search tree.
+   *
+   * @param {MatchT} value The match to add to the binary search tree.
+   */
+  add(value: MatchT) {
+    // Create the node to hold the match value.
+    const node = {
+      value,
+      left: null,
+      right: null,
+    };
+
+    let current = this._root;
+    if (current) {
+      // eslint-disable-next-line no-constant-condition
+      while (true) {
+        // Determine if the match value should go to the left or right of the current
+        // node.
+        const position = compareMatches(current.value, value);
+        if (position === -1) {
+          // The position of the match is to the left of this node.
+          if (current.left) {
+            current = current.left;
+          } else {
+            current.left = node;
+            break;
+          }
+        } else if (position === 1) {
+          // The position of the match is to the right of this node.
+          if (current.right) {
+            current = current.right;
+          } else {
+            current.right = node;
+            break;
+          }
+        } else {
+          // If 0 was returned from compareMatches, that means the node cannot
+          // be inserted because it overlaps an existing node.
+          break;
+        }
+      }
+    } else {
+      // If no nodes exist in the tree, make this the root node.
+      this._root = node;
+    }
+  },
+
+  /**
+   * Converts the binary search tree into an array using an in-order traversal.
+   *
+   * @return {Array.<MatchT>} An array containing the matches in the binary search tree.
+   */
+  toArray(): Array<MatchT> {
+    type Node = {
+      value: MatchT;
+      left: Node;
+      right: Node;
+    };
+
+    function inOrder(node: Node, nodes: MatchT[]) {
+      if (node) {
+        inOrder(node.left, nodes);
+        nodes.push(node.value);
+        inOrder(node.right, nodes);
+      }
+      return nodes;
+    }
+
+    return inOrder(this._root, []);
+  },
+};
+
+/**
+ * Finds and returns the best match between the before and after arrays contained in the segment
+ * provided.
+ *
+ * @param {Segment} segment The segment in which to look for a match.
+ *
+ * @return {MatchT} The best match.
+ */
+function findBestMatch(segment: Segment): MatchT | null {
+  const beforeTokens = segment.beforeTokens;
+  const afterMap = segment.afterMap;
+  let lastSpace = null;
+  let bestMatch: MatchT | null = null;
+
+  // Iterate through the entirety of the beforeTokens to find the best match.
+  for (let beforeIndex = 0; beforeIndex < beforeTokens.length; beforeIndex++) {
+    let lookBehind = false;
+
+    // If the current best match is longer than the remaining tokens, we can bail because we
+    // won't find a better match.
+    const remainingTokens = beforeTokens.length - beforeIndex;
+    if (bestMatch && remainingTokens < (bestMatch as MatchT).length) {
+      break;
+    }
+
+    // If the current token is whitespace, make a note of it and move on. Trying to start a
+    // set of matches with whitespace is not efficient because it's too prevelant in most
+    // documents. Instead, if the next token yields a match, we'll see if the whitespace can
+    // be included in that match.
+    const beforeToken = beforeTokens[beforeIndex];
+    if (beforeToken.key === " ") {
+      lastSpace = beforeIndex;
+      continue;
+    }
+
+    // Check to see if we just skipped a space, if so, we'll ask getFullMatch to look behind
+    // by one token to see if it can include the whitespace.
+    if (lastSpace === beforeIndex - 1) {
+      lookBehind = true;
+    }
+
+    // If the current token is not found in the afterTokens, it won't match and we can move
+    // on.
+    const afterTokenLocations = afterMap[beforeToken.key];
+    if (!afterTokenLocations) {
+      continue;
+    }
+
+    // For each instance of the current token in afterTokens, let's see how big of a match
+    // we can build.
+    afterTokenLocations.forEach(function (afterIndex: number) {
+      // getFullMatch will see how far the current token match will go in both
+      // beforeTokens and afterTokens.
+      const bestMatchLength = bestMatch ? bestMatch.length : 0;
+      const match = getFullMatch(
+        segment,
+        beforeIndex,
+        afterIndex,
+        bestMatchLength,
+        lookBehind
+      );
+
+      // If we got a new best match, we'll save it aside.
+      if (match && match.length > bestMatchLength) {
+        bestMatch = match;
+      }
+    });
+  }
+
+  return bestMatch;
+}
+
+/**
+ * Takes the start of a match, and expands it in the beforeTokens and afterTokens of the
+ * current segment as far as it can go.
+ *
+ * @param {Segment} segment The segment object to search within when expanding the match.
+ * @param {number} beforeStart The offset within beforeTokens to start looking.
+ * @param {number} afterStart The offset within afterTokens to start looking.
+ * @param {number} minLength The minimum length match that must be found.
+ * @param {boolean} lookBehind If true, attempt to match a whitespace token just before the
+ *    beforeStart and afterStart tokens.
+ *
+ * @return {MatchT} The full match.
+ */
+function getFullMatch(
+  segment: Segment,
+  beforeStart: number,
+  afterStart: number,
+  minLength: number,
+  lookBehind: boolean
+): MatchT | undefined {
+  const beforeTokens = segment.beforeTokens;
+  const afterTokens = segment.afterTokens;
+
+  // If we already have a match that goes to the end of the document, no need to keep looking.
+  const minBeforeIndex = beforeStart + minLength;
+  const minAfterIndex = afterStart + minLength;
+  if (
+    minBeforeIndex >= beforeTokens.length ||
+    minAfterIndex >= afterTokens.length
+  ) {
+    return;
+  }
+
+  // If a minLength was provided, we can do a quick check to see if the tokens after that
+  // length match. If not, we won't be beating the previous best match, and we can bail out
+  // early.
+  if (minLength) {
+    const nextBeforeWord = beforeTokens[minBeforeIndex].key;
+    const nextAfterWord = afterTokens[minAfterIndex].key;
+    if (nextBeforeWord !== nextAfterWord) {
+      return;
+    }
+  }
+
+  // Extend the current match as far foward as it can go, without overflowing beforeTokens or
+  // afterTokens.
+  let searching = true;
+  let currentLength = 1;
+  let beforeIndex = beforeStart + currentLength;
+  let afterIndex = afterStart + currentLength;
+
+  while (
+    searching &&
+    beforeIndex < beforeTokens.length &&
+    afterIndex < afterTokens.length
+  ) {
+    const beforeWord = beforeTokens[beforeIndex].key;
+    const afterWord = afterTokens[afterIndex].key;
+    if (beforeWord === afterWord) {
+      currentLength++;
+      beforeIndex = beforeStart + currentLength;
+      afterIndex = afterStart + currentLength;
+    } else {
+      searching = false;
+    }
+  }
+
+  // If we've been asked to look behind, it's because both beforeTokens and afterTokens may
+  // have a whitespace token just behind the current match that was previously ignored. If so,
+  // we'll expand the current match to include it.
+  if (lookBehind && beforeStart > 0 && afterStart > 0) {
+    const prevBeforeKey = beforeTokens[beforeStart - 1].key;
+    const prevAfterKey = afterTokens[afterStart - 1].key;
+    if (prevBeforeKey === " " && prevAfterKey === " ") {
+      beforeStart--;
+      afterStart--;
+      currentLength++;
+    }
+  }
+
+  // @ts-expect-error: New construct any
+  return new Match(beforeStart, afterStart, currentLength, segment);
+}
+
+/**
+ * Creates segment objects from the original document that can be used to restrict the area that
+ * findBestMatch and it's helper functions search to increase performance.
+ *
+ * @param {Array.<Token>} beforeTokens Tokens from the before document.
+ * @param {Array.<Token>} afterTokens Tokens from the after document.
+ * @param {number} beforeIndex The index within the before document where this segment begins.
+ * @param {number} afterIndex The index within the after document where this segment behinds.
+ *
+ * @return {Segment} The segment object.
+ */
+function createSegment(
+  beforeTokens: Array<Token>,
+  afterTokens: Array<Token>,
+  beforeIndex: number,
+  afterIndex: number
+): Segment {
+  return {
+    beforeTokens,
+    afterTokens,
+    beforeMap: createMap(beforeTokens),
+    afterMap: createMap(afterTokens),
+    beforeIndex,
+    afterIndex,
+  };
+}
+
+/**
+ * Finds all the matching blocks within the given segment in the before and after lists of
+ * tokens.
+ *
+ * @param {Segment} The segment that should be searched for matching blocks.
+ *
+ * @return {Array.<Match>} The list of matching blocks in this range.
+ */
+function findMatchingBlocks(segment: Segment): Array<MatchT> {
+  // Create a binary search tree to hold the matches we find in order.
+  // @ts-expect-error: New construct any
+  const matches = new MatchBinarySearchTree();
+  let match;
+  const segments: Segment[] = [segment];
+
+  // Each time the best match is found in a segment, zero, one or two new segments may be
+  // created from the parts of the original segment not included in the match. We will
+  // continue to iterate until all segments have been processed.
+  while (segments.length) {
+    segment = segments.pop() as Segment;
+    match = findBestMatch(segment);
+
+    if (match && match.length) {
+      // If there's an unmatched area at the start of the segment, create a new segment
+      // from that area and throw it into the segments array to get processed.
+      if (match.segmentStartInBefore > 0 && match.segmentStartInAfter > 0) {
+        const leftBeforeTokens = segment.beforeTokens.slice(
+          0,
+          match.segmentStartInBefore
+        );
+        const leftAfterTokens = segment.afterTokens.slice(
+          0,
+          match.segmentStartInAfter
+        );
+
+        segments.push(
+          createSegment(
+            leftBeforeTokens,
+            leftAfterTokens,
+            segment.beforeIndex,
+            segment.afterIndex
+          )
+        );
+      }
+
+      // If there's an unmatched area at the end of the segment, create a new segment from that
+      // area and throw it into the segments array to get processed.
+      const rightBeforeTokens = segment.beforeTokens.slice(
+        match.segmentEndInBefore + 1
+      );
+      const rightAfterTokens = segment.afterTokens.slice(
+        match.segmentEndInAfter + 1
+      );
+      const rightBeforeIndex =
+        segment.beforeIndex + match.segmentEndInBefore + 1;
+      const rightAfterIndex = segment.afterIndex + match.segmentEndInAfter + 1;
+
+      if (rightBeforeTokens.length && rightAfterTokens.length) {
+        segments.push(
+          createSegment(
+            rightBeforeTokens,
+            rightAfterTokens,
+            rightBeforeIndex,
+            rightAfterIndex
+          )
+        );
+      }
+
+      matches.add(match);
+    }
+  }
+
+  return matches.toArray();
+}
+
+/**
+ * Gets a list of operations required to transform the before list of tokens into the
+ * after list of tokens. An operation describes whether a particular list of consecutive
+ * tokens are equal, replaced, inserted, or deleted.
+ *
+ * @param {Array.<string>} beforeTokens The before list of tokens.
+ * @param {Array.<string>} afterTokens The after list of tokens.
+ *
+ * @return {Array.<Object>} The list of operations to transform the before list of
+ *      tokens into the after list of tokens, where each operation has the following
+ *      keys:
+ *      - {string} action One of {'replace', 'insert', 'delete', 'equal'}.
+ *      - {number} startInBefore The beginning of the range in the list of before tokens.
+ *      - {number} endInBefore The end of the range in the list of before tokens.
+ *      - {number} startInAfter The beginning of the range in the list of after tokens.
+ *      - {number} endInAfter The end of the range in the list of after tokens.
+ */
+function calculateOperations(
+  beforeTokens: Array<Token>,
+  afterTokens: Array<Token>
+): Array<Operation> {
+  if (!beforeTokens) {
+    throw new Error("Missing beforeTokens");
+  }
+  if (!afterTokens) {
+    throw new Error("Missing afterTokens");
+  }
+
+  let positionInBefore = 0;
+  let positionInAfter = 0;
+  const operations: Operation[] = [];
+  const segment = createSegment(beforeTokens, afterTokens, 0, 0);
+  const matches = findMatchingBlocks(segment);
+
+  // @ts-expect-error New construct any
+  matches.push(new Match(beforeTokens.length, afterTokens.length, 0, segment));
+
+  for (let index = 0; index < matches.length; index++) {
+    const match = matches[index];
+    let actionUpToMatchPositions: OperationType = "none";
+    if (positionInBefore === match.startInBefore) {
+      if (positionInAfter !== match.startInAfter) {
+        actionUpToMatchPositions = "insert";
+      }
+    } else {
+      actionUpToMatchPositions = "delete";
+      if (positionInAfter !== match.startInAfter) {
+        actionUpToMatchPositions = "replace";
+      }
+    }
+    if (actionUpToMatchPositions !== "none") {
+      operations.push({
+        action: actionUpToMatchPositions,
+        startInBefore: positionInBefore,
+        endInBefore:
+          actionUpToMatchPositions !== "insert"
+            ? match.startInBefore - 1
+            : null,
+        startInAfter: positionInAfter,
+        endInAfter:
+          actionUpToMatchPositions !== "delete" ? match.startInAfter - 1 : null,
+      });
+    }
+    if (match.length !== 0) {
+      operations.push({
+        action: "equal",
+        startInBefore: match.startInBefore,
+        endInBefore: match.endInBefore,
+        startInAfter: match.startInAfter,
+        endInAfter: match.endInAfter,
+      });
+    }
+    positionInBefore = match.endInBefore + 1;
+    positionInAfter = match.endInAfter + 1;
+  }
+
+  const postProcessed = [];
+  let lastOp = { action: "none" } as Operation;
+
+  function isSingleWhitespace(op: Operation) {
+    if (op.action !== "equal") {
+      return false;
+    }
+    if ((op.endInBefore ?? 0) - op.startInBefore !== 0) {
+      return false;
+    }
+    return /^\s$/.test(
+      // @ts-expect-error Not sure why the code slices here
+      beforeTokens.slice(op.startInBefore, op.endInBefore + 1)
+    );
+  }
+
+  for (let i = 0; i < operations.length; i++) {
+    const op = operations[i];
+
+    if (
+      (isSingleWhitespace(op) && lastOp.action === "replace") ||
+      (op.action === "replace" && lastOp.action === "replace")
+    ) {
+      lastOp.endInBefore = op.endInBefore;
+      lastOp.endInAfter = op.endInAfter;
+    } else {
+      postProcessed.push(op as Operation);
+      lastOp = op;
+    }
+  }
+  return postProcessed;
+}
+
+/**
+ * A TokenWrapper provides a utility for grouping segments of tokens based on whether they're
+ * wrappable or not. A tag is considered wrappable if it is closed within the given set of
+ * tokens. For example, given the following tokens:
+ *
+ *      ['</b>', 'this', ' ', 'is', ' ', 'a', ' ', '<b>', 'test', '</b>', '!']
+ *
+ * The first '</b>' is not considered wrappable since the tag is not fully contained within the
+ * array of tokens. The '<b>', 'test', and '</b>' would be a part of the same wrappable segment
+ * since the entire bold tag is within the set of tokens.
+ *
+ * TokenWrapper has a method 'combine' which allows walking over the segments to wrap them in
+ * tags.
+ */
+function TokenWrapper(tokens: any) {
+  this.tokens = tokens;
+  this.notes = tokens.reduce(
+    function (data: any, token: any, index: number) {
+      data.notes.push({
+        isWrappable: isWrappable(token),
+        insertedTag: false,
+      });
+
+      const tag = !isVoidTag(token) && isTag(token);
+      const lastEntry = data.tagStack[data.tagStack.length - 1];
+      if (tag) {
+        if (lastEntry && "/" + lastEntry.tag === tag) {
+          data.notes[lastEntry.position].insertedTag = true;
+          data.tagStack.pop();
+        } else {
+          data.tagStack.push({
+            tag,
+            position: index,
+          });
+        }
+      }
+      return data;
+    },
+    { notes: [], tagStack: [] }
+  ).notes;
+}
+
+/**
+ * Wraps the contained tokens in tags based on output given by a map function. Each segment of
+ * tokens will be visited. A segment is a continuous run of either all wrappable
+ * tokens or unwrappable tokens. The given map function will be called with each segment of
+ * tokens and the resulting strings will be combined to form the wrapped HTML.
+ *
+ * @param {function(boolean, Array.<string>)} mapFn A function called with an array of tokens
+ *      and whether those tokens are wrappable or not. The result should be a string.
+ */
+TokenWrapper.prototype.combine = function (
+  mapFn: (wrappable: boolean, tokens: Array<Token>) => void,
+  tagFn: (tokens: Array<Token>) => void
+) {
+  const notes = this.notes;
+  const tokens = this.tokens.slice();
+  const segments = tokens.reduce(
+    function (data: any, _token: Token, index: number) {
+      if (notes[index].insertedTag) {
+        tokens[index] = tagFn(tokens[index]);
+      }
+      if (data.status === null) {
+        data.status = notes[index].isWrappable;
+      }
+      const status = notes[index].isWrappable;
+      if (status !== data.status) {
+        data.list.push({
+          isWrappable: data.status,
+          tokens: tokens.slice(data.lastIndex, index),
+        });
+        data.lastIndex = index;
+        data.status = status;
+      }
+      if (index === tokens.length - 1) {
+        data.list.push({
+          isWrappable: data.status,
+          tokens: tokens.slice(data.lastIndex, index + 1),
+        });
+      }
+      return data;
+    },
+    { list: [], status: null, lastIndex: 0 }
+  ).list;
+
+  return segments.map(mapFn).join("");
+};
+
+/**
+ * Wraps and concatenates a list of tokens with a tag. Does not wrap tag tokens,
+ * unless they are wrappable (i.e. void and atomic tags).
+ *
+ * @param {string} tag The tag name of the wrapper tags.
+ * @param {Array.<string>} content The list of tokens to wrap.
+ * @param {string} dataPrefix (Optional) The prefix to use in data attributes.
+ * @param {string} className (Optional) The class name to include in the wrapper tag.
+ */
+function wrap(
+  tag: string,
+  content: Array<string>,
+  opIndex: number,
+  dataPrefix: string,
+  className: string
+) {
+  // @ts-expect-error New constructor any
+  const wrapper = new TokenWrapper(content);
+  dataPrefix = dataPrefix ? dataPrefix + "-" : "";
+  let attrs = " data-" + dataPrefix + 'operation-index="' + opIndex + '"';
+  if (className) {
+    attrs += ' class="' + className + '"';
+  }
+
+  return wrapper.combine(
+    function (segment: any) {
+      if (segment.isWrappable) {
+        const val = segment.tokens.join("");
+        if (val.trim()) {
+          return "<" + tag + attrs + ">" + val + "</" + tag + ">";
+        }
+      } else {
+        return segment.tokens.join("");
+      }
+      return "";
+    },
+    function (openingTag: string) {
+      let dataAttrs = ' data-diff-node="' + tag + '"';
+      dataAttrs += " data-" + dataPrefix + 'operation-index="' + opIndex + '"';
+
+      return openingTag.replace(/>\s*$/, dataAttrs + "$&");
+    }
+  );
+}
+
+/**
+ * OPS.equal/insert/delete/replace are functions that render an operation into
+ * HTML content.
+ *
+ * @param {Operation} op The operation that applies to a particular list of tokens.
+ * @param {Array.<Token>} beforeTokens The before list of tokens.
+ * @param {Array.<Token>} afterTokens The after list of tokens.
+ * @param {number} opIndex The index into the list of operations that identifies the change to
+ *      be rendered. This is used to mark wrapped HTML as part of the same operation.
+ * @param {string} dataPrefix (Optional) The prefix to use in data attributes.
+ * @param {string} className (Optional) The class name to include in the wrapper tag.
+ *
+ * @return {string} The rendering of that operation.
+ */
+const OPS = {
+  equal(op: Operation, _beforeTokens: Token[], afterTokens: Token[]) {
+    const tokens = afterTokens.slice(
+      op.startInAfter ?? 0,
+      (op.endInAfter ?? 0) + 1
+    );
+    return tokens.reduce(function (prev, curr) {
+      return prev + curr.string;
+    }, "");
+  },
+  insert(
+    op: Operation,
+    _beforeTokens: Token[],
+    afterTokens: Token[],
+    opIndex: number,
+    dataPrefix: string,
+    className: string
+  ) {
+    const tokens = afterTokens.slice(
+      op.startInAfter ?? 0,
+      (op.endInAfter ?? 0) + 1
+    );
+    const val = tokens.map(function (token) {
+      return token.string;
+    });
+    return wrap("ins", val, opIndex, dataPrefix, className);
+  },
+  delete(
+    op: Operation,
+    beforeTokens: Token[],
+    _afterTokens: Token[],
+    opIndex: number,
+    dataPrefix: string,
+    className: string
+  ) {
+    const tokens = beforeTokens.slice(
+      op.startInBefore,
+      (op.endInBefore ?? 0) + 1
+    );
+    const val = tokens.map(function (token) {
+      return token.string;
+    });
+    return wrap("del", val, opIndex, dataPrefix, className);
+  },
+  replace(...rest: any[]) {
+    return OPS["delete"].apply(null, rest) + OPS["insert"].apply(null, rest);
+  },
+};
+
+/**
+ * Renders a list of operations into HTML content. The result is the combined version
+ * of the before and after tokens with the differences wrapped in tags.
+ *
+ * @param {Array.<Token>} beforeTokens The before list of tokens.
+ * @param {Array.<Token>} afterTokens The after list of tokens.
+ * @param {Array.<Operation>} operations The list of operations to transform the before
+ *      list of tokens into the after list of tokens;
+ * @param {string} dataPrefix (Optional) The prefix to use in data attributes.
+ * @param {string} className (Optional) The class name to include in the wrapper tag.
+ *
+ * @return {string} The rendering of the list of operations.
+ */
+function renderOperations(
+  beforeTokens: Token[],
+  afterTokens: Token[],
+  operations: Operation[],
+  dataPrefix?: string,
+  className?: string
+): string {
+  return operations.reduce(function (rendering, op, index) {
+    return (
+      rendering +
+      OPS[op.action](
+        op,
+        beforeTokens,
+        afterTokens,
+        index,
+        dataPrefix,
+        className
+      )
+    );
+  }, "");
+}
+
+/**
+ * Compares two pieces of HTML content and returns the combined content with differences
+ * wrapped in <ins> and <del> tags.
+ *
+ * @param {string} before The HTML content before the changes.
+ * @param {string} after The HTML content after the changes.
+ * @param {string} className (Optional) The class attribute to include in <ins> and <del> tags.
+ * @param {string} dataPrefix (Optional) The data prefix to use for data attributes. The
+ *      operation index data attribute will be named `data-${dataPrefix-}operation-index`.
+ *
+ * @return {string} The combined HTML content with differences wrapped in <ins> and <del> tags.
+ */
+function diff(
+  before: string,
+  after: string,
+  className?: string,
+  dataPrefix?: string
+): string {
+  if (before === after) {
+    return before;
+  }
+
+  const beforeTokens = htmlToTokens(before);
+  const afterTokens = htmlToTokens(after);
+  const ops = calculateOperations(beforeTokens, afterTokens);
+  return renderOperations(
+    beforeTokens,
+    afterTokens,
+    ops,
+    dataPrefix,
+    className
+  );
+}
+
+export default diff;
diff --git a/shared/editor/components/Styles.ts b/shared/editor/components/Styles.ts
index 2289787a7..876718534 100644
--- a/shared/editor/components/Styles.ts
+++ b/shared/editor/components/Styles.ts
@@ -11,6 +11,109 @@ export type Props = {
   theme: DefaultTheme;
 };
 
+const mathStyle = (props: Props) => `
+/* Based on https://github.com/benrbray/prosemirror-math/blob/master/style/math.css */
+
+.math-node {
+  min-width: 1em;
+  min-height: 1em;
+  font-size: 0.95em;
+  font-family: ${props.theme.fontFamilyMono};
+  cursor: auto;
+}
+
+.math-node.empty-math .math-render::before {
+  content: "(empty math)";
+  color: ${props.theme.brand.red};
+}
+
+.math-node .math-render.parse-error::before {
+  content: "(math error)";
+  color: ${props.theme.brand.red};
+  cursor: help;
+}
+
+.math-node.ProseMirror-selectednode {
+  outline: none;
+}
+
+.math-node .math-src {
+  display: none;
+  color: ${props.theme.codeStatement};
+  tab-size: 4;
+}
+
+.math-node.ProseMirror-selectednode .math-src {
+  display: inline;
+}
+
+.math-node.ProseMirror-selectednode .math-render {
+  display: none;
+}
+
+math-inline {
+  display: inline; white-space: nowrap;
+
+}
+
+math-inline .math-render { 
+  display: inline-block;
+  font-size: 0.85em;
+}
+
+math-inline .math-src .ProseMirror {
+  display: inline;
+  border-radius: 4px;
+  border: 1px solid ${props.theme.codeBorder};
+  padding: 3px 4px;
+  margin: 0px 3px;
+  font-family: ${props.theme.fontFamilyMono};
+  font-size: 80%;
+}
+
+math-block {
+  display: block;
+}
+
+math-block .math-render {
+  display: block;
+}
+
+math-block.ProseMirror-selectednode {
+  border-radius: 4px;
+  border: 1px solid ${props.theme.codeBorder};
+  background: ${props.theme.codeBackground};
+  padding: 0.75em 1em;
+  font-family: ${props.theme.fontFamilyMono};
+  font-size: 80%;
+}
+
+math-block .math-src .ProseMirror {
+  width: 100%;
+  display: block;
+}
+
+math-block .katex-display {
+  margin: 0;
+}
+
+p::selection, p > *::selection {
+  background-color: #c0c0c0;
+}
+
+.katex-html *::selection {
+  background-color: none !important;
+}
+
+.math-node.math-select .math-render {
+  background-color: #c0c0c0ff;
+}
+
+math-inline.math-select .math-render {
+  padding-top: 2px;
+}
+`;
+
 const style = (props: Props) => `
 flex-grow: ${props.grow ? 1 : 0};
 justify-content: start;
@@ -329,6 +432,7 @@ h6:not(.placeholder):before {
   content: "H6";
 }
 
+.ProseMirror[contenteditable="true"]:focus-within,
 .ProseMirror-focused {
   h1,
   h2,
@@ -1254,6 +1358,7 @@ table {
   }
 }
 
+.ProseMirror[contenteditable="true"]:focus-within,
 .ProseMirror-focused .block-menu-trigger,
 .block-menu-trigger:active,
 .block-menu-trigger:focus {
@@ -1344,6 +1449,7 @@ del[data-operation-index] {
 
 const EditorContainer = styled.div<Props>`
   ${style};
+  ${mathStyle};
 `;
 
 export default EditorContainer;
diff --git a/shared/editor/nodes/Math.ts b/shared/editor/nodes/Math.ts
new file mode 100644
index 000000000..0a12e549d
--- /dev/null
+++ b/shared/editor/nodes/Math.ts
@@ -0,0 +1,86 @@
+import {
+  mathBackspaceCmd,
+  insertMathCmd,
+  makeInlineMathInputRule,
+  REGEX_INLINE_MATH_DOLLARS,
+  mathSchemaSpec,
+} from "@benrbray/prosemirror-math";
+import { PluginSimple } from "markdown-it";
+import {
+  chainCommands,
+  deleteSelection,
+  selectNodeBackward,
+  joinBackward,
+} from "prosemirror-commands";
+import {
+  NodeSpec,
+  NodeType,
+  Schema,
+  Node as ProsemirrorNode,
+} from "prosemirror-model";
+import { EditorState, Plugin } from "prosemirror-state";
+import { MarkdownSerializerState } from "../lib/markdown/serializer";
+import MathPlugin from "../plugins/Math";
+import mathRule from "../rules/math";
+import { Dispatch } from "../types";
+import Node from "./Node";
+
+export default class Math extends Node {
+  get name() {
+    return "math_inline";
+  }
+
+  get schema(): NodeSpec {
+    return mathSchemaSpec.nodes.math_inline;
+  }
+
+  commands({ type }: { type: NodeType }) {
+    return () => (state: EditorState, dispatch: Dispatch) => {
+      dispatch(state.tr.replaceSelectionWith(type.create()).scrollIntoView());
+      return true;
+    };
+  }
+
+  inputRules({ schema }: { schema: Schema }) {
+    return [
+      makeInlineMathInputRule(
+        REGEX_INLINE_MATH_DOLLARS,
+        schema.nodes.math_inline
+      ),
+    ];
+  }
+
+  keys({ type }: { type: NodeType }) {
+    return {
+      "Mod-Space": insertMathCmd(type),
+      Backspace: chainCommands(
+        deleteSelection,
+        mathBackspaceCmd,
+        joinBackward,
+        selectNodeBackward
+      ),
+    };
+  }
+
+  get plugins(): Plugin[] {
+    return [MathPlugin];
+  }
+
+  get rulePlugins(): PluginSimple[] {
+    return [mathRule];
+  }
+
+  toMarkdown(state: MarkdownSerializerState, node: ProsemirrorNode) {
+    state.write("$");
+    state.text(node.textContent, false);
+    state.write("$");
+  }
+
+  parseMarkdown() {
+    return {
+      node: "math_inline",
+      block: "math_inline",
+      noCloseToken: true,
+    };
+  }
+}
diff --git a/shared/editor/nodes/MathBlock.ts b/shared/editor/nodes/MathBlock.ts
new file mode 100644
index 000000000..8eba2eb4f
--- /dev/null
+++ b/shared/editor/nodes/MathBlock.ts
@@ -0,0 +1,53 @@
+import {
+  makeBlockMathInputRule,
+  REGEX_BLOCK_MATH_DOLLARS,
+  mathSchemaSpec,
+} from "@benrbray/prosemirror-math";
+import { PluginSimple } from "markdown-it";
+import { NodeSpec, NodeType, Node as ProsemirrorNode } from "prosemirror-model";
+import { EditorState } from "prosemirror-state";
+import { MarkdownSerializerState } from "../lib/markdown/serializer";
+import mathRule from "../rules/math";
+import { Dispatch } from "../types";
+import Node from "./Node";
+
+export default class MathBlock extends Node {
+  get name() {
+    return "math_block";
+  }
+
+  get schema(): NodeSpec {
+    return mathSchemaSpec.nodes.math_display;
+  }
+
+  get rulePlugins(): PluginSimple[] {
+    return [mathRule];
+  }
+
+  commands({ type }: { type: NodeType }) {
+    return () => (state: EditorState, dispatch: Dispatch) => {
+      dispatch(state.tr.replaceSelectionWith(type.create()).scrollIntoView());
+      return true;
+    };
+  }
+
+  inputRules({ type }: { type: NodeType }) {
+    return [makeBlockMathInputRule(REGEX_BLOCK_MATH_DOLLARS, type)];
+  }
+
+  toMarkdown(state: MarkdownSerializerState, node: ProsemirrorNode) {
+    state.write("$$\n");
+    state.text(node.textContent, false);
+    state.ensureNewLine();
+    state.write("$$");
+    state.closeBlock(node);
+  }
+
+  parseMarkdown() {
+    return {
+      node: "math_block",
+      block: "math_block",
+      noCloseToken: true,
+    };
+  }
+}
diff --git a/shared/editor/packages/full.ts b/shared/editor/packages/full.ts
index fac854154..66ccc29bf 100644
--- a/shared/editor/packages/full.ts
+++ b/shared/editor/packages/full.ts
@@ -13,6 +13,8 @@ import Embed from "../nodes/Embed";
 import Heading from "../nodes/Heading";
 import HorizontalRule from "../nodes/HorizontalRule";
 import ListItem from "../nodes/ListItem";
+import Math from "../nodes/Math";
+import MathBlock from "../nodes/MathBlock";
 import Node from "../nodes/Node";
 import Notice from "../nodes/Notice";
 import OrderedList from "../nodes/OrderedList";
@@ -36,6 +38,8 @@ const fullPackage: (typeof Node | typeof Mark | typeof Extension)[] = [
   OrderedList,
   Embed,
   ListItem,
+  Math,
+  MathBlock,
   Attachment,
   Notice,
   Heading,
diff --git a/shared/editor/plugins/Math.ts b/shared/editor/plugins/Math.ts
new file mode 100644
index 000000000..24740c260
--- /dev/null
+++ b/shared/editor/plugins/Math.ts
@@ -0,0 +1,75 @@
+import { MathView } from "@benrbray/prosemirror-math";
+import { Node as ProseNode } from "prosemirror-model";
+import { Plugin, PluginKey, PluginSpec } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+
+export interface IMathPluginState {
+  macros: { [cmd: string]: string };
+  activeNodeViews: MathView[];
+  prevCursorPos: number;
+}
+
+const MATH_PLUGIN_KEY = new PluginKey<IMathPluginState>("prosemirror-math");
+
+export function createMathView(displayMode: boolean) {
+  return (
+    node: ProseNode,
+    view: EditorView,
+    getPos: boolean | (() => number)
+  ): MathView => {
+    // dynamically load katex styles and fonts
+    import(
+      /* webpackChunkName: "katex" */
+      "katex/dist/katex.min.css"
+    );
+
+    const pluginState = MATH_PLUGIN_KEY.getState(view.state);
+    if (!pluginState) {
+      throw new Error("no math plugin!");
+    }
+    const nodeViews = pluginState.activeNodeViews;
+
+    // set up NodeView
+    const nodeView = new MathView(
+      node,
+      view,
+      getPos as () => number,
+      { katexOptions: { displayMode, macros: pluginState.macros } },
+      MATH_PLUGIN_KEY,
+      () => {
+        nodeViews.splice(nodeViews.indexOf(nodeView));
+      }
+    );
+
+    nodeViews.push(nodeView);
+    return nodeView;
+  };
+}
+
+const mathPluginSpec: PluginSpec<IMathPluginState> = {
+  key: MATH_PLUGIN_KEY,
+  state: {
+    init() {
+      return {
+        macros: {},
+        activeNodeViews: [],
+        prevCursorPos: 0,
+      };
+    },
+    apply(tr, value, oldState) {
+      return {
+        activeNodeViews: value.activeNodeViews,
+        macros: value.macros,
+        prevCursorPos: oldState.selection.from,
+      };
+    },
+  },
+  props: {
+    nodeViews: {
+      math_inline: createMathView(false),
+      math_block: createMathView(true),
+    },
+  },
+};
+
+export default new Plugin(mathPluginSpec);
diff --git a/shared/editor/rules/math.ts b/shared/editor/rules/math.ts
new file mode 100644
index 000000000..07d470f4e
--- /dev/null
+++ b/shared/editor/rules/math.ts
@@ -0,0 +1,180 @@
+import MarkdownIt from "markdown-it";
+import StateBlock from "markdown-it/lib/rules_block/state_block";
+import StateInline from "markdown-it/lib/rules_inline/state_inline";
+
+// test if potential opening or closing delimiter
+// assumes that there is a "$" at state.src[pos]
+function isValidDelimiter(state: StateInline, pos: number) {
+  const max = state.posMax;
+  let canOpen = true,
+    canClose = true;
+
+  const prevChar = pos > 0 ? state.src.charCodeAt(pos - 1) : -1;
+  const nextChar = pos + 1 <= max ? state.src.charCodeAt(pos + 1) : -1;
+
+  // check non-whitespace conditions for open/close, and
+  // check that closing delimiter isn't followed by a number
+  if (
+    prevChar === 0x20 || // " "
+    prevChar === 0x09 || // "\t"
+    (nextChar >= 0x30 && nextChar <= 0x39) // "0" - "9"
+  ) {
+    canClose = false;
+  }
+
+  if (nextChar === 0x20 || nextChar === 0x09) {
+    canOpen = false;
+  }
+
+  return { canOpen, canClose };
+}
+
+function mathInline(state: StateInline, silent: boolean): boolean {
+  let match, token, res, pos;
+
+  if (state.src[state.pos] !== "$") {
+    return false;
+  }
+
+  res = isValidDelimiter(state, state.pos);
+  if (!res.canOpen) {
+    if (!silent) {
+      state.pending += "$";
+    }
+    state.pos += 1;
+    return true;
+  }
+
+  // first check for and bypass all properly escaped delimiters
+  // this loop will assume that the first leading backtick can not
+  // be the first character in state.src, which is known since
+  // we have found an opening delimiter already
+  const start = state.pos + 1;
+  match = start;
+  while ((match = state.src.indexOf("$", match)) !== 1) {
+    // found potential $, look for escapes, pos will point to
+    // first non escape when complete
+    pos = match - 1;
+    while (state.src[pos] === "\\") {
+      pos -= 1;
+    }
+
+    // even number of escapes, potential closing delimiter found
+    if ((match - pos) % 2 === 1) {
+      break;
+    }
+    match += 1;
+  }
+
+  // no closing delimiter found, consume $ and continue
+  if (match === -1) {
+    if (!silent) {
+      state.pending += "$";
+    }
+    state.pos = start;
+    return true;
+  }
+
+  // check if we have empty content (ex. $$) do not parse
+  if (match - start === 0) {
+    if (!silent) {
+      state.pending += "$$";
+    }
+    state.pos = start + 1;
+    return true;
+  }
+
+  // check for valid closing delimiter
+  res = isValidDelimiter(state, match);
+  if (!res.canClose) {
+    if (!silent) {
+      state.pending += "$";
+    }
+    state.pos = start;
+    return true;
+  }
+
+  if (!silent) {
+    token = state.push("math_inline", "math", 0);
+    token.markup = "$";
+    token.content = state.src.slice(start, match);
+  }
+
+  state.pos = match + 1;
+  return true;
+}
+
+function mathDisplay(
+  state: StateBlock,
+  start: number,
+  end: number,
+  silent: boolean
+) {
+  let firstLine,
+    lastLine,
+    next,
+    lastPos,
+    found = false,
+    pos = state.bMarks[start] + state.tShift[start],
+    max = state.eMarks[start];
+
+  if (pos + 2 > max) {
+    return false;
+  }
+  if (state.src.slice(pos, pos + 2) !== "$$") {
+    return false;
+  }
+
+  pos += 2;
+  firstLine = state.src.slice(pos, max);
+
+  if (silent) {
+    return true;
+  }
+  if (firstLine.trim().slice(-2) === "$$") {
+    // Single line expression
+    firstLine = firstLine.trim().slice(0, -2);
+    found = true;
+  }
+
+  for (next = start; !found; ) {
+    next++;
+
+    if (next >= end) {
+      break;
+    }
+
+    pos = state.bMarks[next] + state.tShift[next];
+    max = state.eMarks[next];
+
+    if (pos < max && state.tShift[next] < state.blkIndent) {
+      // non-empty line with negative indent should stop the list:
+      break;
+    }
+
+    if (state.src.slice(pos, max).trim().slice(-2) === "$$") {
+      lastPos = state.src.slice(0, max).lastIndexOf("$$");
+      lastLine = state.src.slice(pos, lastPos);
+      found = true;
+    }
+  }
+
+  state.line = next + 1;
+
+  const token = state.push("math_block", "math", 0);
+  token.block = true;
+  token.content =
+    (firstLine && firstLine.trim() ? firstLine + "\n" : "") +
+    state.getLines(start + 1, next, state.tShift[start], true) +
+    (lastLine && lastLine.trim() ? lastLine : "");
+  token.map = [start, state.line];
+  token.markup = "$$";
+  return true;
+}
+
+export default function markdownMath(md: MarkdownIt) {
+  md.inline.ruler.after("escape", "math_inline", mathInline);
+  md.block.ruler.after("blockquote", "math_block", mathDisplay, {
+    alt: ["paragraph", "reference", "blockquote", "list"],
+  });
+}
diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
index f18ba3b51..217144dc7 100644
--- a/shared/i18n/locales/en_US/translation.json
+++ b/shared/i18n/locales/en_US/translation.json
@@ -277,6 +277,8 @@
   "Bold": "Bold",
   "Subheading": "Subheading",
   "Table": "Table",
+  "Math inline (LaTeX)": "Math inline (LaTeX)",
+  "Math block (LaTeX)": "Math block (LaTeX)",
   "Tip": "Tip",
   "Tip notice": "Tip notice",
   "Show diagram": "Show diagram",
@@ -571,7 +573,9 @@
   "Numbered list": "Numbered list",
   "Blockquote": "Blockquote",
   "Horizontal divider": "Horizontal divider",
+  "LaTeX block": "LaTeX block",
   "Inline code": "Inline code",
+  "Inline LaTeX": "Inline LaTeX",
   "Sign In": "Sign In",
   "Continue with Email": "Continue with Email",
   "Continue with {{ authProviderName }}": "Continue with {{ authProviderName }}",
diff --git a/shared/typings/styles.d.ts b/shared/typings/styles.d.ts
new file mode 100644
index 000000000..cbe652dbe
--- /dev/null
+++ b/shared/typings/styles.d.ts
@@ -0,0 +1 @@
+declare module "*.css";
diff --git a/webpack.config.js b/webpack.config.js
index cbdcf84e0..fe8278330 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -17,27 +17,32 @@ module.exports = {
   module: {
     rules: [
       {
-       test: /\.[jt]sx?$/,
-       loader: 'babel-loader',
-       exclude: [
-         path.join(__dirname, 'node_modules')
-       ],
-       include: [
-         path.join(__dirname, 'app'),
-         path.join(__dirname, 'shared'),
-       ],
-       options: {
-         cacheDirectory: true
-       }
+        test: /\.[jt]sx?$/,
+        loader: 'babel-loader',
+        exclude: [
+          path.join(__dirname, 'node_modules')
+        ],
+        include: [
+          path.join(__dirname, 'app'),
+          path.join(__dirname, 'shared'),
+        ],
+        options: {
+          cacheDirectory: true
+        }
       },
       // inline base64 URLs for <=8k images, direct URLs for the rest
       { test: /\.(png|jpg|svg)$/, loader: 'url-loader' },
       {
-       test: /\.woff$/,
-       loader: 'url-loader?limit=1&mimetype=application/font-woff&name=public/fonts/[name].[ext]',
+        test: /\.(woff|woff2|ttf|eot)$/,
+        loader:
+          'url-loader?limit=1&mimetype=application/font-woff&name=public/fonts/[name].[ext]',
       },
       { test: /\.md/, loader: 'raw-loader' },
-    ]
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json'],
diff --git a/yarn.lock b/yarn.lock
index 0684f19b6..1587608e9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1057,6 +1057,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@benrbray/prosemirror-math@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@benrbray/prosemirror-math/-/prosemirror-math-0.2.2.tgz#5b2aeb7c8c5a41d2e39317fe1fbd7040fd347cc9"
+  integrity sha512-n+V8MNKaQ9HtA1IASzoBFwthFY55kpu2I+0aF103AbqUw5eM8YlxHeltnLqjnYRVY4/a6A9t9YlBMBQOli5jgw==
+
 "@braintree/sanitize-url@^6.0.0":
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.0.tgz#fe364f025ba74f6de6c837a84ef44bdb1d61e68f"
@@ -2903,6 +2908,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/katex@^0.14.0":
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/@types/katex/-/katex-0.14.0.tgz#b84c0afc3218069a5ad64fe2a95321881021b5fe"
+  integrity sha512-+2FW2CcT0K3P+JMR8YG846bmDwplKUTsWgT2ENwdQ1UdVfRk3GQrh6Mi4sTopy30gI8Uau5CEqHTDZ6YvWIUPA==
+
 "@types/keygrip@*":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@types/keygrip/-/keygrip-1.0.2.tgz#513abfd256d7ad0bf1ee1873606317b33b1b2a72"
@@ -5407,7 +5417,7 @@ commander@^6.1.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.0.tgz#b990bfb8ac030aedc6d11bc04d1488ffef56db75"
   integrity sha512-zP4jEKbe8SHzKJYQmq8Y9gYjtO/POJLgIdKgV7B9qNmABVFVc+ctqSX6iXh4mCpJfRBOabiZ2YKPg8ciDw6C+Q==
 
-commander@^8.3.0:
+commander@^8.0.0, commander@^8.3.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
   integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
@@ -5752,6 +5762,22 @@ css-color-names@1.0.1:
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-1.0.1.tgz#6ff7ee81a823ad46e020fa2fd6ab40a887e2ba67"
   integrity sha512-/loXYOch1qU1biStIFsHH8SxTmOseh1IJqFvy8IujXOm1h+QjUdDhkzOrR5HG8K8mlxREj0yfi8ewCHx0eMxzA==
 
+css-loader@5.2.6:
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.6.tgz#c3c82ab77fea1f360e587d871a6811f4450cc8d1"
+  integrity sha512-0wyN5vXMQZu6BvjbrPdUJvkCzGEO24HC7IS7nW4llc6BBFC+zwR9CKtYGv63Puzsg10L/o12inMY5/2ByzfD6w==
+  dependencies:
+    icss-utils "^5.1.0"
+    loader-utils "^2.0.0"
+    postcss "^8.2.15"
+    postcss-modules-extract-imports "^3.0.0"
+    postcss-modules-local-by-default "^4.0.0"
+    postcss-modules-scope "^3.0.0"
+    postcss-modules-values "^4.0.0"
+    postcss-value-parser "^4.1.0"
+    schema-utils "^3.0.0"
+    semver "^7.3.5"
+
 css-rules@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/css-rules/-/css-rules-1.1.0.tgz#404b8b1f77bd775f6c6902b7a7b534f5c016b07f"
@@ -5815,6 +5841,11 @@ css-what@^6.1.0:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
   integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
 
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
 cssom@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
@@ -8638,6 +8669,11 @@ iconv-lite@0.6, iconv-lite@0.6.3:
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
+icss-utils@^5.0.0, icss-utils@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
+  integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
+
 idb@^6.1.4:
   version "6.1.5"
   resolved "https://registry.yarnpkg.com/idb/-/idb-6.1.5.tgz#dbc53e7adf1ac7c59f9b2bf56e00b4ea4fce8c7b"
@@ -9974,6 +10010,13 @@ jws@^3.2.2:
     jwa "^1.4.1"
     safe-buffer "^5.0.1"
 
+katex@^0.16.3:
+  version "0.16.3"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.3.tgz#29640560b8fa0403e45f3aa20da5fdbb6d2b83a8"
+  integrity sha512-3EykQddareoRmbtNiNEDgl3IGjryyrp2eg/25fHDEnlHymIDi33bptkMv6K4EOC2LZCybLW/ZkEo6Le+EM9pmA==
+  dependencies:
+    commander "^8.0.0"
+
 kbar@0.1.0-beta.28:
   version "0.1.0-beta.28"
   resolved "https://registry.yarnpkg.com/kbar/-/kbar-0.1.0-beta.28.tgz#35bcf1d45996f5b0cf32f4f70f673c97dc67a1f8"
@@ -11117,6 +11160,11 @@ nan@^2.12.1, nan@^2.16.0:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.17.0.tgz#c0150a2368a182f033e9aa5195ec76ea41a199cb"
   integrity sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==
 
+nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -12106,10 +12154,55 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
-postcss-value-parser@^4.0.2:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
-  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
+postcss-modules-extract-imports@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
+  integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
+
+postcss-modules-local-by-default@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c"
+  integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==
+  dependencies:
+    icss-utils "^5.0.0"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.1.0"
+
+postcss-modules-scope@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
+  integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==
+  dependencies:
+    postcss-selector-parser "^6.0.4"
+
+postcss-modules-values@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
+  integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==
+  dependencies:
+    icss-utils "^5.0.0"
+
+postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
+postcss@^8.2.15:
+  version "8.4.18"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.18.tgz#6d50046ea7d3d66a85e0e782074e7203bc7fbca2"
+  integrity sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
 
 postgres-array@~2.0.0:
   version "2.0.0"
@@ -13906,6 +13999,11 @@ source-list-map@~0.1.7:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
   integrity sha1-xVCyq1Qn9rPyH1r+rYjE9Vh7IQY=
 
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
 source-map-resolve@^0.5.0:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@@ -14296,6 +14394,14 @@ style-data@^2.0.0:
     mediaquery-text "^1.2.0"
     pick-util "^1.1.4"
 
+style-loader@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-2.0.0.tgz#9669602fd4690740eaaec137799a03addbbc393c"
+  integrity sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 style-value-types@4.1.4:
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-4.1.4.tgz#80f37cb4fb024d6394087403dfb275e8bb627e75"